3

无法为我的渐变填充设置动画。这是我的 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动画正在运行，然后我也看不到动画！我试过必须使用的方法（百分比法），但没有奏效！

4

1 回答 1

1

我添加了 background-size: 400% 400%; 在健康方面，你不要使用那个。

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

于 2019-01-01T09:44:11.607 回答