切换类以重新触发动画

Question

我有一个横幅广告，其中包含多个@keyframes css动画，我希望将其设置为循环3次。

我正在尝试修改此代码以适合我的目的：

http://jsfiddle.net/26GUe/

$(document).ready(function() {
    var loops = 3 * 2;
    function removeAddClass() {
        $("#button").toggleClass("animate");
        if (--loops > 0)
             setTimeout(removeAddClass, 2000);
    }
    removeAddClass();
});

我希望它在加载“动画”后加载，播放10秒钟，重置（将类移除<1秒），然后再重复2倍。

你能帮忙吗？

这里大概是我现在所拥有的东西：

https://jsfiddle.net/whatmyth2k/90azvfkj/14/

谢谢！

Answer 1

您要通过删除.animate类使其动画之前取消动画。您需要延迟删除该类。

$(document).ready(function() {
  var loops = 5; // 3 * 2 (6) ends on removeClass, so if you want it to remain on end state, set to odd number

  function removeAddClass() {
    var $el = $('#container')
    $("#container").toggleClass("animate");
    if (--loops > 1) {
      // WAIT 10s to remove class, so animation can finish
      var delay = $el.hasClass('animate') ? 10000 : 0
      setTimeout(removeAddClass, delay);
    }
  }
  setTimeout(removeAddClass, 10000);
});

jsFiddle