Heim > Artikel > Web-Frontend > 动画库Animate.css_html/css_WEB-ITnose
动画库Animate.css_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:34:131721Durchsuche
笔记分享：
用法：到官网(http://daneden.github.io/animate.css/)，下载animate.min.css文件。点击这里
1、首先引入animate css文件
<head> <link rel="stylesheet" href="animate.min.css"></head>
2、给指定的元素加上指定的动画样式名
<div class="animated bounceOutLeft"></div>
这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。
您可以更改动画的持续时间，增加延迟或改变显示次数：
#yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite;} 注意：一定要在CSS恬当的的前缀(webkit, moz等)代替“vendor”
3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
$('#yourElement').addClass('animated bounceOutLeft');
4、当动画效果执行完成后还可以通过以下代码添加事件，可以检测动画结束事件：
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); 注：jQuery.one（） 最多执行事件处理一次。查看手册了解更多
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：在显示代码效果（codepen）_html/css_WEB-ITnoseNächster Artikel：css实现垂直居中_html/css_WEB-ITnose