Animate.css
1.简介：一个跨浏览器的 css3 动画库，内置了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）、放大缩小（等多达 60 多种动画效果，几乎包含了所有常见的动画效果。在炫酷的同时，还一直保持着易于使用的特点。
2. 官网：效果预览
3.0 Installation（安装）：
通过bower安装：$ bower install animate.css --save
通过npm安装：$ npm install animate.css --save
3.1 基本用法：
在文档的标题中包含样式表，通过link标签引入（下载方式可以通过下面cdn访问复制源码）
<head> <link rel="stylesheet" href="animate.min.css"> </head>
3.2 cdn链接：
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css3.3 您可以生成该特定版本的SRI哈希，然后使用它来确保文件的完整性;您还可以通过设置相应的交叉路口属性向CDN发出匿名请求：
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous"> <!-- or --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous"> </head>
3.4 将class动画添加到您想要动画的元素中。您可能还想要包括一个很多class用来以后使用
3.4.2 最后，您需要添加以下类：
| Class Name | |||
|---|---|---|---|
bounce | flash | pulse | rubberBand |
shake | headShake | swing | tada |
wobble | jello | bounceIn | bounceInDown |
bounceInLeft | bounceInRight | bounceInUp | bounceOut |
bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp |
fadeIn | fadeInDown | fadeInDownBig | fadeInLeft |
fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp |
fadeInUpBig | fadeOut | fadeOutDown | fadeOutDownBig |
fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig |
fadeOutUp | fadeOutUpBig | flipInX | flipInY |
flipOutX | flipOutY | lightSpeedIn | lightSpeedOut |
rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight |
rotateOutUpLeft | rotateOutUpRight | hinge | jackInTheBox |
rollIn | rollOut | zoomIn | zoomInDown |
zoomInLeft | zoomInRight | zoomInUp | zoomOut |
zoomOutDown | zoomOutLeft | zoomOutRight | zoomOutUp |
slideInDown | slideInLeft | slideInRight | slideInUp |
slideOutDown | slideOutLeft | slideOutRight |
|
example:
<h1 class="animated infinite bounce">Example</h1>4. 你可以用动画来做很多其他的事情。当您将它与jQuery结合或添加您自己的CSS规则时。使用jQuery动态地添加动画：
$('#yourElement').addClass('animated bounceOutLeft');
你还可以检测到动画的结束：
// See https://github.com/daneden/animate.css/issues/644
var animationEnd = (function(el) {
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
})(document.createElement('div'));
$('#yourElement').one(animationEnd, doSomething);animate.css和jQuery结合教程：点击打开链接（需要翻墙）
5. 您还可以扩展jQuery来添加一个功能，它可以为您完成所有工作：
$.fn.extend({
animateCss: function(animationName, callback) {
var animationEnd = (function(el) {
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
})(document.createElement('div'));
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
if (typeof callback === 'function') callback();
});
return this;
},
});像这样使用它：
$('#yourElement').animateCss('bounce');
or;
$('#yourElement').animateCss('bounce', function() {
// Do somthing after animation
});你可以改变你的动画的持续时间，添加一个延迟或者改变它播放的次数：
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}注意：其中vendor代表(webkit, moz)其中的一个