html - アニメーションでCSS3の背景位置が動かない

Question

グラデーション塗りつぶしをアニメーション化できません。ここに私のCSSと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>

アニメーションが機能しないのはなぜですか? どこまでも無限にぐるぐる回るはずなのに！Firefox はアニメーションが機能していることを示していますInspect Elementが、アニメーションが表示されません! 使わなければならない方法（パーセンテージ法）を試してみたのですが、うまくいきませんでした！