#Animate.css
animate.css是一个很酷,很有趣的跨浏览器动画库。
##基本使用
- 在
<head>处添加样式表
<head>
<link rel="stylesheet" href="animate.min.css">
</head>-
在需要应用动画的元素上添加
animated类。 注：infinite类表示无限循环。 -
最后还需要添加以下具体的动画类：
bounceflashpulserubberBandshakeheadShakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp
举例：
<h1 class="animated infinite bounce">Example</h1>##使用
在你的网站使用animate.css，首先在<head>包含样式表链接，接着为元素添加animated类名，再添加你具体用到的动画类名，就这么简单！
<head>
<link rel="stylesheet" href="animate.min.css">
</head>可以结合jQuery或自定义的CSS规则来使用animate.css 使用jQuery动态添加动画：
$('#yourElement').addClass('animated bounceOutLeft');监听动画结束事件：
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);点击此处查看视频教程 结合JQuery使用Animate.css。
注意: jQuery.one() 用于只执行一次事件回调。更多信息 点击这里.
可以扩展一个jQuery插件来简化使用：
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});这样使用：
$('#yourElement').animateCss('bounce');可以在CSS中改变动画的持续时间，延迟时间，播放次数：
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}注意：使用浏览器前缀(webkit, moz, etc)替换CSS中的"vendor"
Animate.css使用gulp.js构建，你可以很容易地创建自定义构建。首先你需要Gulp和其它依赖：
$ cd path/to/animate.css/
$ sudo npm install接着，运行 gulp 来编译自定义构建。例如，你只需要部分“attention seekers”, 简单地编辑 animate-config.json 文件来选择你需要使用的动画名。
"attention_seekers": {
"bounce": true,
"flash": false,
"pulse": false,
"shake": true,
"headShake": true,
"swing": true,
"tada": true,
"wobble": true,
"jello":true
}Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent