「这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」
animation
animation有八个属性，平时只需要其中几个属性就可以完成动画了，但这次详情了解的话，还是把所有属性都了解一下吧，
name
动画的名字，可以一个或者多个的
duration
动画指定需要多少秒或毫秒完成
这个我一直使用的都是s（秒），从来没用过ms，现在看来可以使用毫秒，但是是不能使用负值的
animation-duration: 10s, 30s, 230ms
timing-function
设置动画将如何完成一个周期，默认为1，可以是整数也可以小数，但不能是0和负数。如果为infinite则表示无限次动画
和transition一样，animation也有这个属性，而且值页都是一样的
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
delay前的延迟间隔。
定义延迟多少时间后动画开始播放
iteration-count
定义动画的播放次数。
可以是写数字，写数字代表的是执行多少次，还有一个自带的值:infinite，infinite的意思是可以无限循环的播放。
三次
animation-iteration-count:3;
无限次
animation-iteration-count:infinite;
direction
指定是否应该轮流反向播放动画。safari浏览器不支持reverse属性和alternate-reverse属性
reverse: 反向播放
alternate: 若动画只播放一次，则和正向播放一样。若播放两次以上，偶数次效果为反向播放
alternate-reverse: 若动画只播放一次，则和反向播放一样。若播放两次以上，偶数次效果为正向播放
fill-mode
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
forwards: 元素停在动画结束时的位置\
backwards:在animation-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-delay时，与none的效果相同
动画开始时的位置也不一定是0%定义的位置，因为动画有可能反向运动。
both: 同时具有forwards和backwards的效果\
play-state
指定动画是否正在运行或已暂停。running表示播放中，paused表示动画暂停
