过渡（transition）,动画（animation）

过渡（transition）

transition:transition-property（css属性的名字）
transition-duration（过渡的时间）
transition-timing-function（过渡的速度）t
ransition-delay（延迟时间）{四个属性值}

transition-timing-function(过渡的速度)：有好几个值linear（匀速）/ ease（慢速开始，加速前进，慢速结束）/ ease-in（只是慢速开始）/ease-out（只是慢速结束）/ease-in-out（慢速开始，加速前进，慢速结束）
动画（animation）
animation:name(名字)
duration（过渡时间）
timing-function（速度）
delay（延迟时间）
iteration-count（播放速度）
direction（反向播放）
fill-mode （不播放的画面）
play-state（暂停和运行）

animation-iteration-count：

infinite无限播放

normal 默认值。动画按正常播放。

reverse 动画反向播放。

alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。

alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。

forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。

backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

animation-play-state:
paused 指定暂停动画