Animate.css动画演示

使用方法：

1. 给元素起个名字
2. 以这个名字加css样式
3. animation-name：slideInDown:动画名称
4. animation-duration：1s。动画执行一共需要花费的时间，单位ms或s
5. animation-timing-function：ease：动画执行时间曲线
6. linear 动画从头到尾的速度是相同的。ease 默认。动画以低速开始，然后加快，在结束前变慢。ease-in 动画以低速开始。ease-out 动画以低速结束。ease-in-out 动画以低速开始和结束。cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
7. animation-delay：.2：.2s后开始执行
8. animation-iteration-count：5:执行次数，infinite无限次；如果设置alternate，则来回算两次
9. animation-direction：alternate：属性定义是否应该轮流反向播放动画。如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。normal:默认值，动画正常播放

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

animation: fadeInUpBig 1.2s linear .2s 1 normal;

html:

  <div id="b5-1"></div>
  

  #b5-1{
    animation: slideInDown 1s ease .2s 5 alternate;
    -webkit-animation: slideInDown 1s ease .2s 5 alternate;
    -ms-animation: slideInDown 1s ease .2s 5 alternate;
    -o-animation: slideInDown 1s ease .2s 5 alternate;
    -moz-animation: slideInDown 1s ease .2s 5 alternate;
  }