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: