css3-animation

概念：css3提供的通过css制作可控动画的技术。
和transform（过渡）的区别：通过关键帧能对动画做更详细的指定和控制。
用法：

1 定义关键帧动画

• 关键帧动画定义时至少得指定两个状态（即动画的开始和结束）。

@keyframs animation-name {
    from:{
      top:0px;
    },
    to:{
      top:300px;
    }
}

• 通过百分号详细指定动画各个阶段的状态

@keyframes animation-name {
    0% { top: 0; }
    30% { top: 300px; }
    50% { top: 150px; }
    70% { top: 300px; }
    80% { top: 0px;  left:-200px;}
    100% { top: 0px;  }
  }

2 引用动画

在css类中引用关键帧动画

.class-name{
  animation:name duration timing-function delay iteration-count direction fill-mode play-state;
}

3 动画本身属性指定

css类中的animation属性指定了动画的名称等一系列特性，是个简写形式，完整的动画本身的属性指定如下：

• animation-name 关键帧动画名称
• animation-duration 动画指定需要多少秒或毫秒完成
• animation-timing-function 设置动画如何完成一个周期（动画的物理运动特性）
  值：linear 匀速
  ease 先慢后快，结束前变慢 默认
  ease-in 低速开始
  ease-out 低速结束
  ease-in-out 低速开始和结束
  cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
• animation-delay 动画在启动前的延迟间隔
  值：time 默认值为 0
• animation-iteration-count 动画的播放次数
  值：n 一个数字，定义播放多少次动画 默认值1
  infinite 动画无限次播放
• animation-direction 是否轮流反向播放动画
  值：normal 正常
  reverse 反向播放
  alternate 在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
  alternate-reverse 在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
• animation-fill-mode 当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态
  值：none 默认，播放完动画后，画面停在起始位置
  forwards 播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
  backwards 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
  both 设置动画状态为动画结束或开始的状态（例如设置奇数播放为forwards状态，偶数播放为backwards状态）
• animation-play-state 动画是否正在运行或已暂停
  值：paused 指定暂停动画
  running 指定正在运行的动画，默认