Css3动画

transform、transition、animation的区别
　1.transform 是静态的,一般辅助transition、animation
　2.触发条件不同：
　　transition通常由事件触发和hover等事件配合使用，与js的交互更紧密
　　animation则和gif动态图差不多，立即播放(或延迟一段时间播放)
　3.精确性：
　　tranistion 只能设定头尾,所有样式属性都一起变化
　　可以设定每一帧的样式和时间，且可以设定循环次数
结论：
　1.如果要简单的from to 效果或者要使用js灵活设定动画属性，用transition
　2.如果要灵活定制多个帧以及循环，用animation

transform：对元素进行旋转、缩放、移动或倾斜的2D、3D转换,元素中心为坐标原点
　none:默认值,不进行变换
　rotate(Xdeg)：水平旋转–> 正数顺时针旋转,负数逆时针旋转
　translate(Xpx,Ypx)：平移–>属性值为一个时，x轴定位；为两个时，x、y轴分别定位
　scale(x,y)：缩放 --> 1为原始大小,正数放大，负数缩小
　skew(Xdeg,Ydeg)：元素根据X轴、Y轴进行翻转

transition: 在一定的时间区间内平滑地过渡
　可参考地址：深入理解CSS过渡transition
　**property：**过渡或动态模拟的CSS属性 (默认值all)
　**duration：**完成过渡所需的时间(秒或毫秒)
　**timing-function：**过渡函数
　**delay：**开始出现的延迟时间
可以过渡的CSS样式: 具有中间值的属性
　颜色: color background-color border-color outline-color
　位置: backround-position left right top bottom
　长度:
　[1]max-height min-height max-width min-width height width
　[2]border-width margin padding outline-width outline-offset
　 [3]font-size line-height text-indent vertical-align
　 [4]border-spacing letter-spacing word-spacing
　数字: opacity visibility z-index font-weight zoom
　组合: text-shadow transform box-shadow clip
　其他: gradient
　
animation: name duration timing-function delay iteration_count direction
name: 必须，需要绑定到Dom元素的 keyframe 名称
duration: 必须，一个动画持续的时间,默认 0
timing-function: 动画的速度曲线
　ease 默认。动画以低速开始，然后加快，在结束前变慢
　ease-in 动画以低速开始; ease-out 动画以低速结束
　ease-in-out 动画以低速开始和结束 ;linear 动画从头到尾的速度是相同的
delay ： 开始动画之前的延时，值以秒或毫秒计
iteration-count： 动画要重复几次(无穷次：infinite)，默认 1次
direction: 是否应该轮流反向播放动画
　normal 方向始终向前
　当重复次数为偶数时方向向前，奇数时方向相反
跟animation有关的其他属性
animation-fill-mode :
　none (默认) 不改变默认行为
　forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
　backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义)
　both 向前和向后填充模式都被应用 设置动画开始之前和结束之后的行为
animation-play-state: running（默认） | paused
　设置动画的运行状态