动画:animation
animation: name duration timing-function delay iteration-count direction;

使用方法:

.box{
    animation: rotate 1s cubic-bezier(0.4,0.1,0.5,1) 0.1s infinite alternate;
}
@keyframes rotate {
 from {
   Properties:Properties value;
 }
 Percentage {
   Properties:Properties value;
 }
 to {
   Properties:Properties value;
 }
}
或者全部写成百分比的形式：
@keyframes rotate {
  0% {
     Properties: value;
  }
  Percentage {
     Properties: value;
  }
  100% {
     Properties: value;
  }
}

描述:animation作用于dom元素上，可以制作一些简单的真实意义上动画

特点:可以定义多个关键帧,可以事件触发也可以不需要事件触发

本质:是通过不同时间点的css属性覆盖达到视觉的变化效果，动画运行完恢复默认属性 

<div class="wobble">

.wobble{
    animation: wobble 5s;
    width          : 80px;
    height         : 80px;
    background     : red;
    border-radius  : 40px;
    margin: 0;
}
@keyframes wobble {
    0% {
        margin-left: 100px;
        background: green;
    }
    40% {
        margin-left: 150px;
        background: orange;
    }
    60% {
        margin-left: 75px;
        background: blue;
    }
    100% {
        margin-left: 100px;
        background: red;
    }
}



<div id="mix" class="div">
    <i class="fa fa-check">
</div>
.mix{
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count:2;/*播放动画的循环次数,默认为1,infinite为无限次数循环*/
    animation-direction:alternate;/*只有两个值，默认值为normal[每次循环都是向前播放]另一个值是alternate[动画播放在第偶数次向前播放，第奇数次向反方向播放]*/
}

@keyframes rotate {
    0% {
        transform : rotate(0deg);
    }
    50% {
        background: #f00;
        transform : rotate(180deg);
    }
    80%{
        transform :translate(100px)
    }
    100% {
        background: #000;
        transform : rotate(270deg);
    }
}


$('#mix').click(function(){
$(this).toggleClass('mix');
});
animation-name:none|keyframes; 

animation-name: none | IDENT[,none | IDENT]*;

描述:是用来定义一个动画的名称，其主要有两个值：IDENT是由Keyframes创建的动画名；none为默认值，当值为none时，将没有任何动画效果。

animation-duration:0|5s; 

animation-duration:

描述:单位为s （秒.）其默认值为“0”

animation-timing-function: 

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1,y1,x2,y2)];
animation-timing-function:cubic-bezier(0.4,0.1,0.5,1);

描述：和transition-timing-function一样

animation-delay:5s;
animation-iteration-count 

/*播放动画的循环次数,默认为1,infinite为无限次数循环*/
animation-iteration-count:2;

animation-direction 

/*指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放*/
animation-direction:alternate;

animation-fill-mode 

animation-fill-mode:forwards;

none	    不改变默认行为。
forwards    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards   在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	    向前和向后填充模式都被应用。

js监控

使用方法: 

//    W3c标准：animationstart animationiteration animationend
//
//    Webkit：webkitAnimationStart webkitAnimationIteration webkitAnimationEnd
//
//    Firefox：animationstart animationiteration animationend
//
//    Opera：animationstart animationiteration animationend
//
//    IE10：MSAnimationStart MSAnimationIteration MSAnimationEnd

        $("#mix").one("webkitAnimationStart",function(){
            console.log('webkitAnimationStart');
        }).one("webkitAnimationIteration",function(){
            console.log('webkitAnimationIteration');
        }).one("webkitAnimationEnd",function(){
            console.log('webkitAnimationEnd');
        });