CSS3 animation 详解

animation介绍

animation的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

transition 包括以下属性：

• transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
• transition-duration: 1s; 过渡的持续时间。
• transition-timing-function: linear; 运动曲线。属性值可以是：
  linear 线性
  ease 减速
  ease-in 加速
  ease-out 减速
  ease-in-out 先加速后减速
• List item

transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
上面的四个属性也可以写成综合属性：

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;

其中，transition-property这个属性是尤其需要注意的，不同的属性值有不同的现象。

Animation 组成

1.关键帧(@keyframes)

关键帧(keyframes) - 定义动画在不同阶段的状态。
动画属性(properties) -决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器）
css属性 - 就是css元素不同关键帧下的状态。

例：

.box{
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
    0% { margin-top: 0px;}
   /** 暂停效果 */
   10% { margin-top: 0px;}
   50% { margin-top: -100px;}
   60% { margin-top: -100px;}
   90% { margin-top: -200px;}
  100% { margin-top: -200px;}
}

需要注意！当属性的个数不确定时：

当我们在定义不同关键帧，元素属性的个数是一个变化的值。
如果一个关键帧的属性，没有出现在其他关键帧的时候，那么这些属性将会使用上一帧的默认值。

区别在于，缺省之后的渐变效果是不会出现的。比如下面两种写法:
写法一：

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

写法二：

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

语法：

@keyframes keyframes-name {
[ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
}
keyframes-name
帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
from
等效于 0%.
to
等效于 100%.

2.动画属性

动画属性可以理解为播放器的相关功能，一个最基本的播放器应该具有：播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。

动画方向（animation-direction）

animation-direction属性表示CSS动画是否反向播放。
可选配置参数为:

single-animation-direction = normal | reverse | alternate | alternate-reverse

• animation-direction: normal 正序播放
• animation-direction: reverse 倒序播放
• animation-direction: alternate 交替播放
• animation-direction: alternate-reverse 反向交替播放
• animation-direction: normal, reverse
• animation-direction: alternate, reverse, normal

动画延迟（animation-delay）

animation-delay属性定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。
默认值0s，表示动画在该元素上后立即开始执行。 该值以秒(s)或者毫秒(ms)为单位。

动画迭代次数（animation-iteration-count）

animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。
默认值只播放一次。

single-animation-iteration-count = infinite | number

动画播放状态（animation-timing-function）

animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。
默认值为running

single-animation-timing-function = running | paused

这些都是经常遇到的属性