2D
1.CSS3过渡
IE10,Firefox，Chrome及Opera支持transition属性
Safari需要前缀-webkit-
IE9及更早的版本，不支持transition属性
Chrome25及更早的版本，需要前缀-webkit-
transition:all 2s;
transition-property 规定应用过渡的css属性的名称
none（无属性）
all（所有属性）
property（定义应用过渡效果的CSS属性名称列表,分隔）
transition-duration 定义过度效果花费时间，默认0
transition-timing-function 规定过渡效果的时间曲线，默认"ease"
transition-delay 规定过渡效果何时开始,几秒后开始 默认0
2.2D变形（以中心点为准）
transform:none|rotate|scale|skew|translate|matrix;
rotate旋转
需要先有transform-origin属性定义
transform:rotate(30deg);正数顺时针 负数逆时针
translateX translateY （x，y轴移动）
translate(100px,100px);
scale缩放
transform:scale(1,1.5) xy轴上的缩放
transform:scaleX(2);x轴缩放2倍
transform:scaleY(2);y轴缩放2倍
skew扭曲
transform-origin:x-axis y-axis;改变元素中心点
rransform-origin：left top;
3.3D效果(preserve-3d开启3d模式，perspective:800px;展示3d效果（一般800px-1200px）)
3d位移
translateZ()以方框中心为原点，变大和translate3d()
3d旋转
rotateZ()以方框中心为原点，顺时针旋转
transform-style:flat|preserve-3d;
规定如何在3d空间中呈现被嵌套的元素
flat:子元素不保留其3d位置
preserve-3d:子元素保留其3d位置
perspective:800px;透视,展示3d效果（该变量在父元素和子元素下定义的视点不同）
none:无3d空间,取值越小，效果越明显
backface-visibility:visible|hidden;（反面可见|反面不可见）
4.关键帧动画
语法：@keyframes animationname{
keyframes-selector{css-styles;}
}
animationname:声明动画名称
keyframes-selector:用来划分动画的时长
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
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 规定对象动画时间之外的状态。