animate_css.png
animate.css
Github地址: https://github.com/daneden/animate.css
体验地址：https://daneden.github.io/animate.css/
安装:
- Bower:
$ bower install animate.css --save
- npm:
$ npm install animate.css --save
使用：
- 基本用法
<head>
<link rel="stylesheet" href="animate.min.css">
</head> - 使用CDN
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head> - 使用带SRI hash的CDN，注意设置crossorigin为anonymous
<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>
用法：
- 给元素加上css类
$('#yourElement').addClass('animated bounceOutLeft');
- 去掉css类就可以去掉动画效果
$('#yourElement').removeClass('animated bounceOutLeft');
- 加上infinite就可以循环播放
$('#yourElement').addClass('animated infinite bounceOutLeft');
扩展：
-
如果你需要在动画完成之后，执行另一些操作，可以扩展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; }, });
使用：
(1)仅仅执行动画，不执行其它操作
$('#yourElement').animateCss('bounce');
(2)先执行动画，完成之后，执行其它操作
$('#yourElement').animateCss('bounce', function() {
// Do somthing after animation
});
-
可以通过添加css样式来控制动画的时长，延迟时间和执行次数(indinite为无限多次)
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
} -
自定义编译animate.css
- 进入animate.css目录，并安装所需的依赖
$ cd path/to/animate.css/
$ sudo npm install
- 如有需要，可以修改animate-config.json，来编译所需的动画效果对应css，默认是所有动画效果
"attention_seekers": {
"bounce": true,
"flash": false,
"pulse": false,
"shake": true,
"headShake": true,
"swing": true,
"tada": true,
"wobble": true,
"jello":true
} - 运行gulp编译命令，生成自定义的css文件
网友评论