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