动画相关之动画和关键帧

动画(Animation)，表示两个状态之间平滑过渡的效果。由动画属性和关键帧组成

动画属性

animation-name: 动画名称(默认值为none)
animation-duration: 持续时间(默认值为0)
animation-timing-function: 时间函数(默认值为ease)
animation-delay: 延迟时间(默认值为0)
animation-iteration-count: 循环次数(默认值为1)
animation-direction: 动画方向(默认值为normal)
animation-play-state: 播放状态(默认值为running)
animation-fill-mode: 填充模式(默认值为none)

1. 动画名称

动画名称(Animation-name)，表示关键帧(Key-frames)定义时的名字。

2. 动画时间

动画时间(Animation-duration)，表示一次动画的持续时间，跟过渡里的transition-duration差不多；

3. 动画函数

动画函数(Animation-timing-function)，表示动画的时间函数，跟过渡的transition-timing-function差不多；

4. 动画延迟

动画延迟(Animation-delay)，表示动画延迟指定时间后开始，跟过渡的transition-delay差不多；

5. 动画次数

动画次数(Animation-iteration-count)，表示动画执行的次数,infinite表示无限循环；

6. 动画方向

动画方向(Animation-direction)，表示动画开始的位置，如从开始位置开始或从结束位置开始；

7. 动画状态

动画状态(Animation-play-state)，表示动画的播放状态，如继续或暂停；

8. 动画模式

动画模式(Animation-fill-mode)，表示动画的填充模式；

关键帧

关键帧(keyframes)，表示单次动画的执行动作。

.animation {
    animation: AnimationName 2s ease 0s infinite;
}
@keyframes AnimationName {
    /* from等于0%*/
    from {width:0;}
    /* to等于100% */
    to {width: 100px;}
}