CSS3 Background Position Not Moving in Animation

Question

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>