动画使用及基础

动画（animation）：

将静态的页面变得动起来，并且不同于过渡，可以不需要触发，仅设置时间就可以实现。也可以无限重复等。

使用步骤：

• 通过设置@keyframs关键帧 定义动画 并命名
• 通过animation来调用动画

定义动画：

@keyframs +动画名（尽量不要使用关键代码，可能会引起冲突）{
     from{  初始帧
     }
     to{  结束帧
     }
   }

调用动画：

animation:动画名（-name） 动画完成时间（-duration） 执行次数（-iteration-count） 运动曲线（-timing-function） 是否反向执行（-direction） 延迟时间（-delay）;

animation为复合元素，可以拆分成括号中的。
此外还有：animation-play-state定义动画进行或者暂停
animation-fill-mode定义对象动画之外的状态。
调用动画是前两个不可以少，其他的可以看情况省略，不需要全部写。

百分比动画：

不同与之前的from……to……
可以让动画拆分成0到100%可以实现动画多段进行并给单个节点设置属性

@keyframs 动画名{
0%{
	初始帧
}
50%{

}
100%{
	结束帧
}
}

一般情况：如果我们不设置开始针或结束帧，默认元素的初始状态作为初始帧或结束帧。

动画属性：

动画调用的时候已经提到过了
咱们可以将animation复合属性拆分为单一属性写法

1.定义动画的名字

animation-name:动画名;

强调不要使用关键字

2.完成时间：

执行一次动画所用的时间s/sm

animation-duration:2s;

3.动画执行的方向：

animation-direction:alternate;

属性值：

• normal 正常 默认值
• reverse 反向 结束帧到开始帧
• alternate 交替 alternate会计算执行次数。

4.延迟时间：

animation-delay:2s;

5.动画填充模式：

animation-fill-mode:forwrads;

属性值：

• forwards:保持动画结束时的状态
• backwards:保持动画开始时的状态
• both：动画开始时，保持0%，动画结束时，保持100%。

6.运动曲线：

animation-timing-function:linear;

属性值：

• linear 匀速 默认值
• ease 减速
• ease-in 加速
• ease-in-out 先加速后减速
• steps（）分割成几步执行

7.多个动画使用：

animation-name: 动画1，动画2，动画3;
animation-duration:4s  2s;

若只有一个动画时间，所有动画都会执行同一时间。若有两个值，三个动画，第三个动画会从头开始取值。

8.多个动画的属性层叠：

多个动画定义了属性层叠，动画名在后面的优先级比在前面的高。

若后面的动画执行完了，前面的动画还未执行完，层叠的属性才会交给前面的动画去执行。

9.动画的暂停：

/*暂停*/
animation-play-state:paused;
/* 播放*/
animation-play-state:running;