过渡模块和动画模块的区别：过渡动画需要人为的去触发这个反应，而动画模块不需要人为
相同点：都是动画；都是系统新增的属性；都是要满足三要素才有动画效果
三要素：1.告诉系统执行哪个动画，要写出动画名称；animation-name:名称;
???????2.告诉系统我们需要创建一个名称的动画； @keyframes 名称 {
???????????????????????????????????????from{
???????????????????????????????????????????}
???????????????????????????????????????to{
??????????????????????????????????????????}
??????????????????????????????????????????????????????????}
???????3.告诉系统动画持续时长; ???????????animation-duration:动画持续时间;
其他属性：动画运动的速度：animation-timing-function：（linear-线性...）；
?????????动画延迟多少秒执行：animation-delay：秒数；
?????????动画执行次数：animation-iteration-count：次数；
?????????动画是否轮流反向播放：animation-direction：alternate（轮流反向播放）normal（正常播放，默认取值）；
?????????控制动画的发生和静止：animation-play-state：running（动画正在播放，默认取值）paused（动画静止）；
注意点：第二种方式制作动画不用from-to用百分比，好处可以设置任意多的节点
???????????0%{
???????????}
???????????50%{
???????????}
???????????100%{
???????????}
???????????动画是有一定的状态的：1.等待状态；2.执行状态；3.结束状态；
???????????animation-fill-mode（动画等待和结束状态的样式）：none（不做任何改变）
???????????????????????????????????????????????????????????backwards（动画第一帧的状态）
???????????????????????????????????????????????????????????forwards（动画最后一帧的状态）
???????????????????????????????????????????????????????????both(动画从第一帧的样式开始最后停留在最后一帧)
动画模块的连写：animation：动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画；
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>动画模块</title> ???<style> ???????@keyframes ?{ ???????} ???????div{ ???????????animation-duration: ; ???????} ???</style></head><body><div></div></body></html>CSS动画之动画模块
原文地址：https://www.cnblogs.com/myErebos/p/8586433.html