前端CSS动画框架animate.css使用说明

animate_css.png

animate.css

Github地址: https://github.com/daneden/animate.css
体验地址：https://daneden.github.io/animate.css/

安装:

1. Bower:

$ bower install animate.css --save

2. npm:

$ npm install animate.css --save

使用：

1. 基本用法
   
   
   
2. 使用CDN
   
   href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css">
   
   href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
   
3. 使用带SRI hash的CDN，注意设置crossorigin为anonymous
   
   href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css"
   integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
   crossorigin="anonymous">
   
   href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
   integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
   crossorigin="anonymous">
   

用法：

1. 给元素加上css类

   $('#yourElement').addClass('animated bounceOutLeft');

2. 去掉css类就可以去掉动画效果

   $('#yourElement').removeClass('animated bounceOutLeft');

3. 加上infinite就可以循环播放

   $('#yourElement').addClass('animated infinite bounceOutLeft');

扩展：

1. 如果你需要在动画完成之后，执行另一些操作，可以扩展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
});

2. 可以通过添加css样式来控制动画的时长，延迟时间和执行次数(indinite为无限多次)
   #yourElement {
   -vendor-animation-duration: 3s;
   -vendor-animation-delay: 2s;
   -vendor-animation-iteration-count: infinite;
   }

3. 自定义编译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文件