过渡模块和动画模块的区别：过渡动画需要人为的去触发这个反应，而动画模块不需要人为
相同点：都是动画；都是系统新增的属性；都是要满足三要素才有动画效果
三要素：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>