CSS3 Animation transform

“关键帧”（@keyframes),它的样式规则是由多个百分比构成，如0%到100%之间，分别在每一个百分比中，加上不同的属性，从而让元素达到一种在不断变化的效果。语法规则如下：
@keyframes 动画名称{
0%{元素状态}
。。。
100%{元素状态}
}
animation属性：

• animation-name：@keyframes动画的名称
• animation-duration:动画完成一个周期所花费的时间，默认是0
• animation-timing-function：动画的速度曲线（缓动效果）。默认是ease
• animation-delay:动画开始的延迟时间，默认是0
• animation-iteration-count:动画被播放次数。默认是1
• animation-direction：动画是否在下一周期逆向播放。默认是 ”normal“
• animation-play-state:动画是否正在运行或暂停。默认是”running“
• animation-fill-mode:对象动画时间之外的状态

transform
向元素应用2D或3D转换。该属性允许我们对元素进行旋转，缩放，移动或倾斜。
参数：
rotate（角度值）：旋转
translate(x,y):移动
scale（x,y):缩放
skew(x,y)：扭曲
matrix（a,b,c,d,e,f):矩阵

对象阴影【box-shadow】
box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色；
可以使用一个或多个投影，如果使用多个投影时必须要用逗号分开
还可以通过inset来设置对象的内阴影。
背景颜色线性渐变【linear-gradient】
语法：
background：linear-gradient（起点，起点颜色，过渡色【可选】，终点颜色）；
起点：top从上到下，left从左到右，left top：左上角到右下角
过渡色：可以插入多个，表示多种颜色的渐变