CSS3 Background Position Not Moving in Animation [duplicate] - html

Question

This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 4 years ago.
Can't animate my Gradient Fill.
Here's my CSS and HTML:..
.health {
height: 412px;
padding-top: 162px;
background: linear-gradient(270deg, #ff0000, #cdff00);;
animation-name: gradian;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#-webkit-keyframes gradian {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#-moz-keyframes gradian {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#keyframes gradian {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
<section class="health" class="section-bg">
<div class="container">
<div class="row portfolio-container" title ="Click here to order Diabetes diseases" style="">
<a href="#"><div class="col-lg-12 col-md-12 portfolio-item filter-app wow fadeInRight" data-wow-delay="0.2s" style="position: absolute;visibility: visible;animation-delay: 0.2s;animation-name: fadeInRight;overflow: visible;">
<div class="portfolio-wrap">
<div id="" class ="col-lg-12 col-md-12">
<center>
<p style="font-size: 42px;color: aliceblue;font-weight: bold;">Health Boosters</p>
</center>
</div>
</div>
</div>
</a>
<div class ="col-lg-12 col-md-12" style="height: 47px;animation-name:colorjoin;animation-duration:1s;">
</div></div></div>
</section>
Why the animation does not work?
Where as it should move round and round infinitely!
Firefox shows in Inspect Element that the animation is working, then too I can't see the animation!
I have tried the method(percentage method) that has to be used, but it didn't work!

Answer 1

I had added background-size: 400% 400%; in health, class your not use that.
.health {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: gradian 15s ease infinite;
-moz-animation: gradian 15s ease infinite;
animation: gradian 15s ease infinite;
}
#-webkit-keyframes gradian {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes gradian {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes gradian {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<section class="health" class="section-bg">
<div class="container">
<div class="row portfolio-container" title ="Click here to order Diabetes diseases" style="">
<a href="#"><div class="col-lg-12 col-md-12 portfolio-item filter-app wow fadeInRight" data-wow-delay="0.2s" style="position: absolute;visibility: visible;animation-delay: 0.2s;animation-name: fadeInRight;overflow: visible;">
<div class="portfolio-wrap">
<div id="" class ="col-lg-12 col-md-12">
<center>
<p style="font-size: 42px;color: aliceblue;font-weight: bold;">Health Boosters</p>
</center>
</div>
</div>
</div>
</a>
<div class ="col-lg-12 col-md-12" style="height: 47px;animation-name:colorjoin;animation-duration:1s;">
</div></div></div>
</section>