动画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 经常与鼠标经过等配合使用