Question

假设我有这个HTML：

<a id="btn-shake" class="animated shake" href="#">CONTINUE</a>

和这个CSS：

a#btn-shake {
    width: 200px;
    height: 40px;
    clear: both;
    display: inline-block;
    margin: 0px auto;

    animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;

    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

我想重复这个震动动画，但不是连续的。我想摇一摇，等待5秒再摇一摇，然后等待5秒钟摇一摇等。

但我不知道该怎么做。

是否可以使用animate.css和纯css？怎么做？

Answer 1

实现这一目标的一种方法是在动画本身中建立延迟。如下所示：

a#btn-shake {
    width: 200px;
    height: 40px;
    clear: both;
    display: inline-block;
    margin: 0px auto;

    animation-name: shake-with-delay;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

@keyframes shake-with-delay {
    from, 16%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    1.6%, 4.8%, 8%, 11.2%, 14.4% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    3.2%, 6.4%, 9.6%, 12.8% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

这种方法的最大缺点是百分比与您想要实施的持续时间密切相关。

或者，如果您对JavaScript解决方案没问题，可以执行以下操作：

function doAnimation(id, animName, duration, delay) {
    var el = document.getElementById(id);
    var timer;
    function addClass() {
        el.classList.add(animName);
    }
    function removeClass() {
        el.classList.remove(animName);
    }
    setInterval(function () {
        clearTimeout(timer);
        addClass();
        timer = setTimeout(removeClass, duration);
    }, duration + delay);
}

doAnimation('btn-shake', 'shake', 1000, 5000);

JS解决方案的优势在于您可以独立控制animate.css中的任何动画，并轻松更改持续时间。

Answer 2

使用JavaScript，你可以监听要触发的元素的anamationEnd事件，删除摇动动画，然后使用setTimeout将振动类添加回元素。

首先，您需要设置一个函数来监听不同的浏览器动画结束事件。

var pfx = ["webkit", "moz", "MS", "o", ""];    
function prefixedEventListener(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p]+type, callback, false);
    }
}

然后用变量抓住你的按钮。

var btnShake = document.querySelector("#btnShake");

最后调用传递按钮的前缀事件侦听器函数，您正在侦听的内容以及事件触发后要执行的操作。

prefixedEventListener(btnShake ,"AnimationEnd",function(e){
    btnShake.classList.remove("shake");
    setTimeout(function(){btnShake.classList.add("shake");}, 5000);

});

有关此主题的更多信息，请参阅此article。

使用Animate.css每5秒重复一次动画

2 个答案: