过渡（transition）动漫（animation）

过渡（transition）

transition:transition-property（css属性的名字）transition-duration（过渡的时间）transition-timing-function（过渡的速度）transition-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 指定暂停动画
running 指定正在运行的动画