动画animation可以设置多个节点来精准控制一个或者一组动画，用来实现复杂的动画效果。相比较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
一、动画的基本使用
1、用keyframes定义动画（类似于定义类选择器）
@keyframes 自定义动画名称{
0%{动画效果}
n%{动画效果} 可设置多节点
100%{动画效果}}
（1）0%是动画的开始，100%是动画的完成，这样的规则就是动画的序列。
（2）在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画。
（3）动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式和次数。
（4）用百分比来规定发生变化的时间或者用关键词"from"和 "to"，等同于“0%”和“100%”
2、元素使用动画animation-name、animation-duration
animation-name:自定义动画名称
animation-duration:持续时间
二、动画常用属性
animation-timing-function 规定动画的速度曲线，默认是 ease。linear匀速、ease逐渐慢下来、ease-in加速、ease-out减速、ease-in-out先加速再减速、steps()指定了时间函数中的间隔数量（步长），类似于进度条，steps(5)，5步走完
animation-delay 设置动画何时开始。默认是 0
animation-iteration-count 设置动画被播放的次数，默认是1。infinite 无限循环播放
animation-direction 设置动画是否在下个周期逆向播放，默认normal，alternate逆向播放
animation-fill-mode 设置动画结束后的状态。forwards保持在结束位置，backwards返回
animation-play-state 设置动画运行或暂停，paused暂停，running运行
三、动画简写
animation:自定义动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束后的状态
animation:move 2s linear 0s 1 alternate forwards
（1）简写属性里面不包括animation-play-state
（2）暂停动画animation-play-state:paused 经常与鼠标经过等配合使用
