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 中显示动画正在运行，但我也看不到动画！不得不用的方法（百分比法）试过了，还是不行！

Answer 1

我添加了背景尺寸：400% 400%；在健康方面，class 你不要使用它。

.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>

CSS3 背景位置在动画中不移动

CSS3 Background Position Not Moving in Animation

html

css

css-gradients