css - 如何创建 "pulsing"动画 - 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是一个工作 fiddle 。单击框以查看脉动。检查this link更多