我试图在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;
}
发布于 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;
}
发布于 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>
发布于 2018-03-04 22:35:37
看一下animate.css的文档,它简单地说你可以做到这一点:
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
https://stackoverflow.com/questions/30046994
复制相似问题