CSS动画
参考链接：https://www.jianshu.com/p/d999f090d333 http://www.w3school.com.cn/cssref/pr_transition.asp
过渡 属性
transition 过渡属性的简写属性
transition-property 过渡效果的 CSS 属性名称
transition-duration 过渡效果使用时间
transition-timing-function 过渡效果速度曲线
transition-delay 过渡效果开始之前的延迟时间
transition
css的过渡属性，有四个值
例如：
div
{
transition:property duration timing-function delay;
-moz-transition:property duration timing-function delay; /* Firefox 4 */
-webkit-transition:property duration timing-function delay; /* Safari and Chrome */
-o-transition:property duration timing-function delay; /* Opera */
}
transition-property
设置过渡效果的 CSS 属性的名称
可能的值
none 没有属性使用过渡属性
all 所有的属性都可以使用过渡属性
具体属性值 多个属性之间可以用“,”隔开
transition-timing-function
速度曲线
可能的值：
linear 匀速
ease 慢-快-慢
ease-in
ease-out
ease-in-out
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(x1,y1,x2,y2)
用三次贝尔赛曲线表示的速度曲线,
P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)
transition-delay
动画效果延后几秒后开始
动画
@keyframes 动画效果
animation 所有动画属性的简写属性，除了 animation-play-state 属性
animation-name 绑定的@keyframes名称
animation-duration 完成动画的时间【0】
animation-timing-funtion 动画的速度曲线【ease】
animation-delay 动画开始之前的延迟【0】
animation-iteration-count 动画播放的次数【1】
animation-direction 是否轮流反向播放动画【normal】
animation-play-state 动画播放状态【running】
animation-fill-mode 对象动画时间之外的状态
animation
.move{
animation:name duration timing-funtion delay iteration-count direction；
-webkit-animation:name duration timing-funtion delay iteration-count direction；/*Safari 和 Chrome*/
}
@keyframes
@keyframes name{
from {...}/*...可以为任意css属性*/
to {...}
}
或者
@keyframes name{
0% {...}
25% {...}
.../*可以为0%--100%之间的任意数*/
100% {...}
}
animation-name
keyframename 绑定到选择器的 keyframe 的名称
none 无动画效果
animation-play-state
running 动画正在运行
paused 动画已暂停
animation-timing-function
同transition-timing-function
lineat 匀速
ease 慢–快--慢
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始低速结束
cubic-bezier(n,n,n,n) 自定义
animation-direction
normal 正常播放
alternate 动画在奇数次正向播放，在偶数次反向播放
alternate-reverse 动画在奇数次反向播放，在偶数次正向播放
reverse 动画反向播放
animation-fill-mode
动画在播放之前或之后，其动画效果是否可见
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
后期更新例子…