CSS3转换和动画

2D转换

transform属性

属性值有:

translate（平移，单位px）

rotate（旋转，单位deg）

scale（缩放，给定倍数）

skew（翻转，根据X轴，Y轴，单位deg）

matrix（函数式，自定义）

3D转换

transfrom属性

属性值

rotateX(单位deg)

rotateY(单位deg)

过渡

动画

animation属性

@keyframes规则

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

from同0%

to同100%

在keyframes中创建动画后，要把它绑定到某个选择器，至少要规定动画名称，动画时长