最近有在使用css的animation属性但是对其很多的关键API还不是很熟练，正好写篇博客来细致的过一遍。
首先 animation 是很多属性的简写 | animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 和 animation-fill-mode。
animation-name
一个动画的名称， 在设置了之后可以使用keywords来定义动画的细节。
animation-duration
指定一个动画周期的时长，设置负值浏览器会忽略。
animation-timing-function
animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个
| ease | ease-in | ease-out | linear | inherit |
|---|---|---|---|---|
| 平滑 | 缓入 | 缓出 | 线性 | 循环 |
animation-delay
animation-delay定义了动画何时开始，默认为0，在设置了之后会应用在动画在元素上什么时候执行。如果定义了一个负值那么动画可能从某一部分开始执行，
animation-iteration-count
定义在结束前执行多少次，默认为1次。
animation-direction
CSS 属性指示动画是否反向播放。
animation-fill-mode
属性用来指定在动画执行之前和之后如何给动画的目标应用样式。
