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

Answer 1

您需要定义animation-duration的.slideOutLeft:

.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+ */
}

更多信息可以在这里找到

Answer 2

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

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

Answer 3

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

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

默认（无课程）= 1s
慢= 2s
慢= 3s
快= 800ms
快= 500ms

用法示例：

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