jQuery animate.css 动画速度控制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30046994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
animate.css animation speed control
提问by Abdul Basit
I am trying to control animation speed in animate.css, here is my code but unfortunately I am unable to do so.
我正在尝试控制动画速度animate.css，这是我的代码，但不幸的是我无法这样做。
Can anyone explain how I can control this?
谁能解释我如何控制这个？
@-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;
}
采纳答案by ffffff
Animate.css has implemented some speed control classes:
Animate.css 已经实现了一些速度控制类：
https://github.com/daneden/animate.css#slow-slower-fast-and-faster-class
https://github.com/daneden/animate.css#slow-slower-fast-and-faster-class
default (no class) = 1s
slow = 2s
slower = 3s
fast = 800ms
faster = 500ms
默认（无课程）= 1s
慢= 2s
慢= 3s
快= 800ms
快= 500ms
Usage example:
用法示例：
<p class="animated slideOutLeft faster">This will slide out with a duration of 500ms.</p>
回答by LinkinTED
You need to define the animation-durationon the .slideOutLeft:
您需要定义animation-duration的.slideOutLeft：
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
-webkit-animation-duration: 5s;
animation-duration: 5s;
}
Or shorthand (with all browser prefixes):
或速记（带有所有浏览器前缀）：
.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+ */
}
More information can be found here
更多信息可以在这里找到
回答by Arash Esmaeili
You can change animation duration globally for everything with .animated class. For example, here I changed it to 0.6s and worked well for me:
您可以使用 .animated 类全局更改所有内容的动画持续时间。例如，在这里我将其更改为 0.6s 并且对我来说效果很好：
.animated {
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
回答by Alexander Kimaru
Well looking at the documentation of animate.css it simply says you can do this:
看看 animate.css 的文档，它只是说你可以这样做：
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
回答by StefansArya
If you don't like modify from the CSS files, then you can modify that element styles directly with javascript
如果您不喜欢从 CSS 文件中修改，那么您可以直接使用 javascript 修改该元素样式
$.fn.extend({
animateCSS: function(animationName, callback, duration) {
var animationEnd = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animationEnd)
if (this[0].style[t] !== undefined){
animationEnd = animationEnd[t];
break;
}
if(duration)
this.css('-webkit-animation-duration', duration+'s')
.css('animation-duration', duration+'s');
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
if(duration)
$(this).css('-webkit-animation-duration', '')
.css('animation-duration', '');
if (typeof callback === 'function') callback();
});
return this;
}
});
回答by mxlse
See CSS Animation Duration/ CSS Transition Durationfor handling the duration. There is also animation/transition-delay for a delay.
请参阅CSS Animation Duration/ CSS Transition Duration来处理持续时间。还有用于延迟的动画/过渡延迟。
