变形与动画相关属性

CSS 3提供的变形支持

transform属性

用于设置变形，包括移动、缩放、倾斜、位移。
变形的顺序不同，得到的效果也不同。
移动

• translate(tx,ty) 沿x轴移动tx距离，沿y轴移动ty距离，其中ty可以省略为0.
• translateX(tx) 沿x轴移动tx距离
• translateY(ty) 沿y轴移动ty距离
• translateZ(tz) 沿z轴移动tz距离

缩放

• scale(sx,sy) 沿x轴缩放比为sx，沿y轴缩放比为sy，其中sy可以省略等于sx。

• scaleX(sx) 相当于scale(sx,1)

• scaleY(sy) 相当于scale(1,sy)

• scaleZ(sz) 相当于scale(1,1,sz)

  1表示不缩放，小于1表示缩小，大于表示放大。

旋转

• rotate(angle) 绕Z轴顺时针旋转angle角度
• rotateX(angle) 绕X轴顺时针旋转angle角度
• rotateY(angle) 绕Y轴顺时针旋转angle角度
• rotateZ(angle) 绕Z轴顺时针旋转angle角度
  angle角度单位为deg

倾斜

• skew(xAngle,yAngle) 沿X轴倾斜xAngle角度，沿Y轴倾斜yAngle角度，sy可以省略为0.
• skewX(xAngele) 沿X轴倾斜xAngle角度
• skewY(yAngele) 沿Y轴倾斜yAngle角度

transform-origin属性

设置变形的中心点

• left 左边界
• right 右边界
• top 上边界
• bottom 下边界
• center 中间
• 长度值（Z轴方向值只支持长度值）
• 百分比

CSS 3提供的Transition动画

transition属性

• transiton-property 指定元素的哪个属性进行平滑渐变处理
• transiton-duration 渐变持续时间
• transition-timing-function 渐变速度
• transition-delay 延迟时间

渐变速度

• linear 匀速
• ease 先慢，然后加速到最大再减慢
• ease-in 先慢后快
• ease-out 先快后慢
• ease-in-out 类似ease

CSS 3提供的Animation动画

animation复合属性

• animation-name 指定动画名称（即指定一个已有的关键帧定义）
• animation-duration 持续时间
• animation-timing-function 变化速度
• animation-delay 延迟时间
• animation-iteration-count 循环次数

关键帧定义：

@keyframes 关键帧名称 {
	from | to | 百分比 {
		属性1 ： 属性值1；
		属性2 ： 属性值2；
		……
	}
}

示例：

	@keyframes complex {
			0% {
				transform:rotate(0deg) scale(1);
				background-color:#f00;
			}
			40% {
				transform:rotate(720deg) scale(0.1);
				background-color:#ff0;
			}
			80% {
				transform:rotate(1080deg) scale(4);
				background-color:#f0f;
			}
			100% {
				transform:rotate(0deg) scale(1);
				background-color:#00f;
			}
		}