css3动画animation详解

主要参数：

animation-name 动画名称
animation-delay 动画延迟开始的时间(单位ms/s）
animation-duration 动画持续播放的时间
animation-timing-function 动画的过渡类型
animation-iteration-count 动画的循环次数（不写默认1次）infinite（无限循环）
animation-direction 动画在循环过程中是否反向
animation-play-state 对象动画的状态
animation-fill-mode 对象动画时间之外的状态

动画

@keyframes 动画名称 {            //对应上面的animation-name的值
  0% {                  //初始状态
  opacity: 0;
  left: 200px;          
  }
  40% {                 //动画到40%的状态
  opacity: 0;           
  }
  100% {                //动画到100结束时状态
  opacity: 1;
  left: 400px;          
  }
}

主要参数的取值

animation-timing-function

1. linear： 线性过渡。
2. ease： 平滑过渡。
3. ease-in： 由慢到快。
4. ease-out： 由快到慢。
5. ease-in-out： 由慢到快再到慢。
6. cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-direction

1. normal： 正常方向
2. alternate： 正常与反向交替

animation-play-state

1. running： 运动
2. paused： 暂停

animation-fill-mode

1. none： 默认值。不设置对象动画之外的状态
2. forwards： 设置对象状态为动画结束时的状态
3. backwards： 设置对象状态为动画开始时的状态
4. both： 设置对象状态为动画结束或开始的状态