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!

I had pure css3 animation gradient background code can I post that for you. — Arshiya Khanam, Jan 01 '19 at 09:36

Arshiya Khanam · Accepted Answer · 2019-01-01T10:35:14.377

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>

see what? you should explain why your code is working – Temani Afif Jan 01 '19 at 10:14 — Temani Afif, Jan 01 '19 at 10:14

CSS3 Background Position Not Moving in Animation

1 Answers1