无法为我的渐变填充设置动画。这是我的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>
为什么动画不起作用?它应该无限地移动!火狐在Inspect Element
显示动画正在工作,那么我也看不到动画!我已经尝试了必须使用的方法(百分比方法),但它不起作用!
我添加了背景大小: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>