移动端动画 效果 花里胡哨秀到爆炸

transform这厮
 1.translate(x,y) 偏移
 2.rotate(ndeg) 旋转
 3.skew(xdeg,ydeg) 变形
 4.scale(x,y) 缩放x,y为倍数 

二，transtion这货：过渡

transtion:width 2s;
 transtion:all 200ms; 

三animation这物:动画

第一 定义动画
@keyframes 动画名{
from{css样式}
to{css样式}
}
第二步，应用动画
选择器{
animation：动画名 时间
}

animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1 infinite无限循环。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。