用css3完成变换过渡和动漫实际效果

div {
　　transform: translate(50px,100px);
　　-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

div {
　　transform: rotate(30deg);
　　-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

div {
    -webkit-transform: scale(2,3); /* Safari /
    transform: scale(2,3); / 规范英语的语法 */
}

div {
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 /
    -webkit-transform: skew(30deg,20deg); / Safari and Chrome */
}

 translate3d(x,y,z)    界定 三d 转换。
translateX(x)    界定 三d 转换，仅应用用于 X 轴的值。
translateY(y)    界定 三d 转换，仅应用用于 Y 轴的值。
translateZ(z)    界定 三d 转换，仅应用用于 Z 轴的值。
scale3d(x,y,z)    界定 三d 放缩变换。
scaleX(x)    界定 三d 放缩变换，根据给定1个 X 轴的值。
scaleY(y)    界定 三d 放缩变换，根据给定1个 Y 轴的值。
scaleZ(z)    界定 三d 放缩变换，根据给定1个 Z 轴的值。
rotate3d(x,y,z,angle)    界定 三d 转动。
rotateX(angle)    界定沿 X 轴的 三d 转动。
rotateY(angle)    界定沿 Y 轴的 三d 转动。
rotateZ(angle)    界定沿 Z 轴的 三d 转动。
perspective(n)    界定 三d 变换元素的透視主视图。

transition    简写特性，用于在1个特性中设定4个过渡特性。
transition-property    要求运用过渡的 CSS 特性的名字。
transition-duration    界定过渡实际效果花销的時间。默认设置是 0。transition-duration: 5s;
transition-timing-function    要求过渡实际效果的時间曲线图。默认设置是 "ease"。
    linear    要求以同样速率刚开始至完毕的过渡实际效果（等于 cubic-bezier(0,0,1,1)）。
    ease    要求慢速刚开始，随后变快，随后慢速完毕的过渡实际效果（cubic-bezier(0.25,0.1,0.25,1)）。
    ease-in    要求以慢速刚开始的过渡实际效果（等于 cubic-bezier(0.42,0,1,1)）。
    ease-out    要求以慢速完毕的过渡实际效果（等于 cubic-bezier(0,0,0.58,1)）。
    ease-in-out    要求以慢速刚开始和完毕的过渡实际效果（等于 cubic-bezier(0.42,0,0.58,1)）。
    cubic-bezier(n,n,n,n)　　在 cubic-bezier 涵数中界定自身的值。将会的值是 0 至 1 之间的标值。
transition-delay　　要求过渡实际效果什么时候刚开始。默认设置是 0。transition-delay: 2s;

@keyframes    要求动漫。    
animation    全部动漫特性的简写特性，除 animation-play-state 特性。    
animation-name    要求 @keyframes 动漫的名字。    
animation-duration    要求动漫进行1个周期所花销的秒或毫秒。默认设置是 0。    
animation-timing-function    要求动漫的速率曲线图。默认设置是 "ease"。    
animation-fill-mode    要求当动漫不播发时（当动漫进行时，或当动漫有1个延迟时间未刚开始播发时），要运用到元素的款式。    
animation-delay    　　要求动漫什么时候刚开始。默认设置是 0。    
animation-iteration-count    要求动漫被播发的次数。默认设置是 1。
animation-direction    要求动漫是不是在下1周期逆向地播发。默认设置是 "normal"。
animation-play-state    要求动漫是不是正在运作或中止。默认设置是 "running"。