我正在尝试控制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;
}

最佳答案

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

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

默认值(无类别)= 1s
慢= 2秒
慢= 3秒
快速= 800ms
更快= 500ms

用法示例:

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

10-08 15:17