动画学习之Animate.css

首先给个地址查看下效果：

http://www.jq22.com/yanshi819

animate.css的主页简单明了，能演示各个动画的效果，目的也很简单，“just-add-water css animations”。

不多说，直接上学习资料：

官方github

使用方法：（当然你得引入animate.css）

一、静态使用

给需要动画的元素添加class

<!-- animated是必须添加的；bounce是动画效果；infinite从语义来看也秒懂，无限循环，不添加infinite默认播放一次 -->
<div class="animated bounce infinite">动画</div>

然后刷新之后就可以看到效果了

二、动态使用

思路：

给动画对象添加类，然后监听动画结束事件，一旦监听到动画结束，立马移除前面添加的类。

这样一来，想什么时候开始和结束动画都随你了。对于这种用法（也是实际开发中最多的用法），官方给出了jQuery的封装：

//扩展$对象，添加方法animateCss
    $.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');

原生js写法：

 //animate("选择器","动画","次数","时延")
    function animate(seletor, animation_name, count, delay) {
            var target = document.querySelectorAll(seletor)
            var timer = null;
            timer = setInterval( function() {
                target.forEach( function(x) {
                    x.className += " animated " + animation_name;
                    x.addEventListener("animationend", function(){
                    x.className = x.className.replace(" animated " + animation_name, "");
                    });
                } )
                count --;
                if( count <= 0 ) {
                    clearInterval( timer );
                }
            }, delay)
        }
    //使用示例
    animate('.haha', "bounce", 2, 1000);

源码解析：

一，animated 
设置了动画时长和动画执行前后元素应该怎样应用样式（animation-fill-mode）

animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

二，infinite

设置了动画次数（无限次）

infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

三，动画类名（如：bounce）

设置使用的动画，及一些动画的初始化属性。
.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

自定义选项

这个放在最后是因为看了源码之后很自然就无师自通懂得怎么自定义了，例如想用css来控制动画次数等。

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

记住：vendor要替换成相应的适配规格（-webkit-、-ms-、-o-等）