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

【问题标题】：Repeat animation every 5 seconds using Animate.css使用 Animate.css 每 5 秒重复一次动画
【发布时间】：2016-07-21 20:32:17
【问题描述】：

假设我有这个 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？该怎么做？

【问题讨论】：

标签： css animate.css

【解决方案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 中的任何动画，轻松更改持续时间。

【讨论】：

这是一个 CodePen，展示了它是如何工作的：codepen.io/segdeha/pen/rLdkNV
嗯，谢谢，但这很奇怪。它看起来不像摇晃动画，最后稍微下落时会出现一些“故障”。没有其他选项可以做到这一点吗？
我修复了动画以防止“跌倒”故障。您可以更改转换以获得您想要的任何效果。
此答案不包括 animate.css 中的摇动动画。
啊，我的错。我对 animate.css 不熟悉。

【解决方案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。

【讨论】：