css 动画分类主要有两大部分 transition 和 animation
transition
transition 可以实现元素的过渡效果。目前大多浏览器都支持不加前缀的 transition 属性。
// 比如我们实现一个鼠标放上你，长度变化的效果
div {
width:100px;
height:30px;
background-color:#FF9900;
transition:1s 1s width ease;
}
div:hover{
width: 300px;
height:20px;
}
主要有四个属性：
transition-delay
规定了在过渡效果开始作用之前需要等待的时间，默认值 0s,表示无需等待时间。 值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始
transition-property
指定应用过渡属性的名称,初始值：all
transition-duration
属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
transition-timing-function
属性用来描述这个 css 变化的中间值是如何计算的，默认值：ease(逐渐放慢)
其他值选项：linear：匀速 ； ease-in：加速； ease-out：减速 ；cubic-bezier 函数：自定义速度模式
局限：
transition 的用法比较简单，但是 transition 无法自己触发，并且使用一次之后就结束了。transition 只能指定开始状态和结束状态，没办法控制中间状态。transition 只能指定一个 css 属性来使用。
animation
关键帧动画，主要有以下这些属性：
animation-name
指定 keyframes 动画的名称
animation-duration
动画一个周期花费的时间
animation-timing-function
动画速度曲线，默认是 ease;有以下几个可选值：
animation-timing-function:ease-in
animation-timing-function:ease-out
animation-timing-function:linear
animation-timing-function:cubic-bezier
animation-timing-function:ease-in-out
animation-delay
动画延迟时间
animation-iteration-count
动画播放的次数，默认是 1
animation-direction
动画播放方向，默认是 normal;
animation-direction:alternate(动画在奇数次正序播放，偶数次逆序播放)；
animation-direction:alternate-reverse(动画在奇数次逆序播放，偶数次正序播放)；
animation-direction:inherit(继承父元素的该属性)；
animation-direction:initial:(设置该属性为默认值)
其他选项：reverse(逆序播放)；
animation-fill-mode
设置 CSS 动画在执行之前和之后如何将样式应用于其目标，默认值是 none; 有以下几个可选值
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
动画进行有前称为等待期，结束后成为完成期。
animation-fill-mode: none表示完成期回到动画初始样式。
animation-fill-mode: forwords表示等待期保持初始样式，完成期间保持最后一帧样式。
animation-fill-mode: backwards表示等待期为第一帧样式，完成期跳转为初始样式。
animation-fill-mode: both表示等待期样式为第一帧样式，完成期保持最后一帧样式
animation-play-state
属性规定动画正在运行还是暂停
animation-play-state: paused|running
keyframes 规则
指定动画变化的过程，指定的变化时发生时使用％，或关键字"from"和"to"，这是和 0％到 100％相同。
