CSS3动画属性

整理一点css3动画的设置，用于制作一些好看的动画。
CSS3有关动画制作有3个属性：

2D/3D 转换属性（Transform）

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2D转换
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴

translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

div{
	transform: translate(50px,100px);
	-ms-transform: translate(50px,100px);		/* IE 9 */
	-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
	-o-transform: translate(50px,100px);		/* Opera */
	-moz-transform: translate(50px,100px);		/* Firefox */
}

rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div{
	transform: rotate(30deg);
	-ms-transform: rotate(30deg);		/* IE 9 */
	-webkit-transform: rotate(30deg);	/* Safari and Chrome */
	-o-transform: rotate(30deg);		/* Opera */
	-moz-transform: rotate(30deg);		/* Firefox */
}

scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数（x,y分别扩大的倍数）：

div{
	transform: scale(2,4);
	-ms-transform: scale(2,4);	/* IE 9 */
	-webkit-transform: scale(2,4);	/* Safari 和 Chrome */
	-o-transform: scale(2,4);	/* Opera */
	-moz-transform: scale(2,4);	/* Firefox */
}

skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

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

matrix() 方法把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

div{
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
	-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
	-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
}

3D转换
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

div{
	transform: rotateX(120deg);
	-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
	-moz-transform: rotateX(120deg);	/* Firefox */
}

rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

div{
	transform: rotateY(130deg);
	-webkit-transform: rotateY(130deg);	/* Safari 和 Chrome */
	-moz-transform: rotateY(130deg);	/* Firefox */
}

过渡属性（Transition）

transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。
transition-timing-function 规定过渡效果的时间曲线。
transition-delay 规定过渡效果何时开始。

实例
向宽度、高度和转换添加过渡效果：

div{
	transition: width 2s, height 2s, transform 2s;
	-moz-transition: width 2s, height 2s, -moz-transform 2s;
	-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
	-o-transition: width 2s, height 2s,-o-transform 2s;
}

动画属性（Animation）

/*示例*/
@keyframes testAnimation{
	/*每一阶段的状态*/
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
#elementId{
     /*所有属性简写*/
     /*animation: testAnimation 3s linear 5s infinite normal forwards;*/
     animation-name: testAnimation;
     animation-duration: 3s;
     animation-timing-function: linear;
     animation-delay: 5s;
     animation-iteration-count: infinite;
     animation-direction: normal;
     animation-play-state:running;
     animation-fill-mode:forwards;
}

@keyframes 规定动画 后跟这个动画的名称。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function 规定动画的速度曲线。
ease | linear | ease-in | ease-out | ease-in-out
animation-delay 规定动画延时秒或毫秒 。
animation-iteration-count 规定动画被播放的次数。
infinite（无限次）
animation-direction 规定动画是否在下一周期逆向地播放。
normal（普通） | reverse（反向） | alternate（先正向，后反向） | alternate-reverse（先反向，后正向）
animation-play-state 规定动画是否正在运行或暂停。
animation-fill-mode 规定对象动画时间之外的状态。
none（无） | forwards（结束帧） | backwards（开始帧） | both（开始帧或结束帧）