如何创建“脉冲”动画 - CSS动画定时偏移主题

Question

我需要创建“脉冲”动画。但是，在奇数迭代期间，不透明度的动画会随时间变化。第一次迭代第二次渐变显示时间，但下一次迭代 - 不透明度 - 动画偏移。请帮助！ 代码：

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

Answer 1

您可以使用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了解更多