animate.css动画速度控制

Question

我正在尝试控制animate.css中的动画速度，这是我的代码，但很遗憾我无法做到。

有人可以解释一下我如何控制它吗？

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}

- Abdul Basit

Answer 1

你需要在 .slideOutLeft 上定义 animation-duration:

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}

或者使用所有浏览器前缀的简写方式：

.slideOutLeft {
  -webkit-animation: slideOutLeft 5s; /* Safari 4+ */
  -moz-animation:    slideOutLeft 5s; /* Fx 5+ */
  -o-animation:      slideOutLeft 5s; /* Opera 12+ */
  animation:         slideOutLeft 5s; /* IE 10+, Fx 29+ */
}

可以在这里找到更多信息。

- GreyRoofPigeon

Answer 2

您可以全局更改所有具有 .animated 类的动画持续时间。例如，这里我将其更改为0.6秒，并且对我来说效果很好：

你可以使用 .animated 类来全局改变所有动画的持续时间。例如，我将其改为 0.6 秒，这对我来说效果很好：

.animated {
   -webkit-animation-duration: 0.6s;
   animation-duration: 0.6s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}

- Arash Esmaeili

---

在循环动画中动态改变动画速度时，animation-duration的效果不是很好。 - John Miller

Answer 3

Animate.css实现了一些速度控制类：

https://github.com/daneden/animate.css#slow-slower-fast-and-faster-class

默认 (无 class) = 1秒钟
慢速 = 2秒钟
更慢 = 3秒钟
快速 = 800毫秒
更快 = 500毫秒

使用示例：

<p class="animated slideOutLeft faster">This will slide out with a duration of 500ms.</p>

- ffffff

Answer 4

看一下animate.css的文档，它简单地说你可以这样做：

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

请查看：https://github.com/daneden/animate.css#usage。

- Alexander Kimaru

Answer 5

如果您不喜欢从CSS文件中进行修改，那么您可以直接使用JavaScript修改该元素的样式。

$.fn.extend({
  animateCSS: function(animationName, callback, duration) {
    var animationEnd = {
      animation: 'animationend',
      OAnimation: 'oAnimationEnd',
      MozAnimation: 'mozAnimationEnd',
      WebkitAnimation: 'webkitAnimationEnd',
    };

    for (var t in animationEnd)
      if (this[0].style[t] !== undefined){
        animationEnd = animationEnd[t];
        break;
      }

    if(duration)
      this.css('-webkit-animation-duration', duration+'s')
        .css('animation-duration', duration+'s');

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);

      if(duration)
        $(this).css('-webkit-animation-duration', '')
          .css('animation-duration', '');

      if (typeof callback === 'function') callback();
    });

    return this;
  }
});

- StefansArya

Answer 6

请参考 CSS动画持续时间 / CSS过渡持续时间 来处理持续时间。还有一个用于延迟的 animation/transition-delay。

- mxlse