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

假设我有这个HTML：

这个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？如何做到这一点？

实现这一点的一种方法是将延迟构建到动画本身中。如下所示：

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);
    }
}

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);

这种方法最大的缺点是百分比与您想要实现的持续时间紧密耦合

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

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);
    }
}

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中的任何动画，并且可以轻松地更改持续时间。

使用JavaScript，您可以侦听要触发的元素的anamationed事件，删除shake动画，然后使用setTimeout将shake类添加回元素

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

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);
    }
}

最后，调用prefix event listener函数，传入按钮、正在侦听的内容以及事件触发后要执行的操作

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

});

---

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

这里有一个代码笔，显示了它是如何工作的：嗯，谢谢，但它很奇怪。它看起来不像抖动动画，当它最后稍微下降时，会出现一些“小故障”。有没有其他的方法可以做到这一点？我修复了动画以防止“坠落”故障。你可以更改变换以获得你想要的任何效果。这个答案不包括animate.css.Ah中的抖动动画，我的错。我不熟悉animate.css。