animate.css动画速度控制
animate.css动画速度控制
提问于 2015-05-05 15:44:49
我试图在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;
}回答 5
Stack Overflow用户
发布于 2018-03-04 04:04:38
您可以使用.animated类全局更改所有内容的动画持续时间。例如，这里我将其更改为0.6s，并且对我来说效果很好：
.animated {
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}Stack Overflow用户
发布于 2018-08-04 05:46:16
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>Stack Overflow用户
发布于 2018-03-04 22:35:37
看一下animate.css的文档，它简单地说你可以做到这一点：
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30046994
复制相关文章
相似问题