动画、过渡是什么？

• 过渡效果（transition），使页面变化更平滑，以下参数可直接写在 transition 后面

• transition-translate:动画位置

1. transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。

2. transition-duration：过渡动画的一个持续时间。

3. transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

4. transition-delay：延迟多久后开始动画

• 动画（animation） 先定义 @keyframes 规则（0%，100% | from，to） 然后定义 animation，以下参数可直接写在 animation 后面

1. animation-name: 定义动画名称

2. animation-duration: 指定元素播放动画所持续的时间长

3. animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式

4. animation-delay: 指定元素动画开始时间

5. animation-iteration-count: infinite | number：指定元素播放动画的循环次数

6. animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为 normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）

7. animation-play-state: running | paused ：控制元素动画的播放状态