Jquery animate.css动画速度控制

我试图在

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

---

您需要在

上定义
动画持续时间
。SlideOutlet
：

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

或速记（带有所有浏览器前缀）：

有关处理持续时间的详细信息，请参见。对于延迟，还存在动画/过渡延迟。
您可以使用.animated类全局更改所有内容的动画持续时间。例如，在这里我将其更改为0.6s，并且对我来说效果很好：

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

看看animate.css的文档，它只是说您可以这样做：

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

请参阅：
如果您不喜欢从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;
  }
});

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


默认值（无类）=1s

慢速=2秒

较慢=3s

快速=800毫秒

更快=500毫秒

用法示例：

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

这将以500毫秒的持续时间滑出
这正是我需要的！非常感谢你！！
<p class="animated slideOutLeft faster">This will slide out with a duration of 500ms.</p>