非常好用的css动画库animate.css

dawkdamwdkmadk 2018-04-13 09:33:36

原博文地址：https://blog.csdn.net/u012780176/article/details/79934501

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.css
3.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">

<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
slideOutUp
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)其中的一个

...全文