html中animate动画,animate.css动画速度控制

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)

html中animate动画,animate.css动画速度控制相关推荐

html设定元素动画执行,CSS动画 _Animation 教程_W3cplus
本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命.虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了. 对我而言,CSS动 ...
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
转场动画：动画效果 css 动画 animate.css
实现动画的方式 <template><button @click="show = !show">改变</button><!-- 1..cs ...
html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
HTML中的动画起名字,css动画
css动画首先要明白动画是一帧一帧的,由多个帧拼起来的动画 @keyframes 此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式.相比较过渡更加的容易空值中间的部分其指示了一个过程到 ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
JS动画和CSS动画之间的区别和特点?
一.写在前面之前我们讲了requestAnimationFrame用来解决js的相关动画出现卡顿的问题.现在我们来详细了解一下CSS和JS动画之间的区别和特点. 二.CSS动画优点: 1.浏览器可 ...
html 气泡动画效果,CSS 动画实现动态气泡背景的方法
今天是节后上班第一天,早上醒来一睁眼,嗯?啊...?什么...?这是哪?我是谁?上什么班? 然鹅,还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒,冬天早上起床的难度...想必各位都心有体会 ...
js动画和css动画的差别
代码复杂度方面: 简单动画,css 代码实现会简单一些,js 复杂一些. 复杂动画的话,css 代码就会变得冗长,js实现起来更优. 动画运行时: 对动画的控制程度上,js 比较灵活,能控制动画暂停, ...
Js动画与CSS动画区别及相应实现
**CSS3的动画的优点 ** 在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化代码相对简单缺点在动画控制上不够灵活兼容性不好 JavaScript的动画正好弥补了这两个缺点,控制能力 ...

html中animate动画,animate.css动画速度控制

html中animate动画,animate.css动画速度控制相关推荐

最新文章

热门文章