我需要创建“脉冲”动画。但是不透明的动画会在奇数次迭代中随时间变化。第一次迭代显示第二个渐变,但接下来的迭代显示-不透明度动画偏移。请帮助!
代码:
.gradient {
height: 292px;
width: 260px;
margin-left: 76px;
margin-top: 61px;
left: 0;
position: absolute;
top: 0;
z-index: 1;
}
.gradient_main {
background: #1000af;
background: linear-gradient(135deg, #1201b0, #87078b, #ff0505, #ff8700, #f9c700);
background-size: 400% 100%;
opacity:1;
-webkit-animation: bannerGradientMain 10s infinite linear alternate;
}
.gradient_main2 {
background: #1000af;
background: linear-gradient(135deg, #87078b, #ff0505, #ff8700, #f9c700, #98AB22, #00681b);
background-size: 400% 100%;
background-position: left center;
opacity:0;
-webkit-animation: bannerGradientMain2 10s infinite linear alternate;
}
/*FIRST GRADIENT ANIMATION*/
@keyframes bannerGradientMain {
0% {
background-position: 0% 0%;
}
47%{
background-position: 100% 0%;
}
52%{
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
/*SECOND GRADIENT ANIMATION*/
@keyframes bannerGradientMain2 {
0% {
background-position: 0% 0%;
opacity: 0;
}
47% {
background-position: 100% 0%;
opacity: 0;
}
52% {
background-position: 100% 0%;
opacity: 1;
}
97%{
opacity:1;
}
100% {
background-position: 0% 0%;
opacity: 0;
}
}
<div>
<div class="gradient gradient_main"></div>
<div class="gradient gradient_main2"></div>
</div>
最佳答案
您可以使用jQuery实现此目的:
$(document).bind('click', function() {
var p = $(".gradient_main");
for(var i=0; i<3; i++) {
p.animate({opacity: 0.2}, 100, 'linear').animate({opacity: 1}, 100,'linear');
}
});
Here是一个工作的小提琴。单击该框以查看脉动。检查this link了解更多