5 个答案:
答案 0 :(得分：20)
您需要在animation-duration上定义.slideOutLeft：
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
-webkit-animation-duration: 5s;
animation-duration: 5s;
}
或简写(包含所有浏览器前缀)：
.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+ */
}
可以找到更多信息here
答案 1 :(得分：2)
好好查看animate.css的文档，它只是说你可以这样做：
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
答案 2 :(得分：0)
如果您不想修改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;
}
});
答案 3 :(得分：0)
Animate.css实现了一些速度控制类：
默认(无类别)= 1s
慢= 2秒
慢= 3秒
快速= 800ms
更快= 500ms
用法示例：
This will slide out with a duration of 500ms.
答案 4 :(得分：0)
