css3新属性:过渡transition,变换transform(2D,3D),动画animation

1.1 过渡

过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片



补间动画：自动完成从起始状态到终止状态的的过渡。

关于补间动画更多学习可查看http://mux.alimama.com/posts/1009

特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

transition-property设置过渡属性

transition-duration设置过渡时间

transition-timing-function设置过渡速度

linear ease easeIn easeOut easeInOut

transition-delay设置过渡延时

任何的属性的改变都会触发过渡

1.2 2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；

a) 移动位置相当于自身原来位置

b) y轴正方向朝下

c) 除了可以像素值，也可以是百分比，相对于自身

2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数；

3、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；

a) 当元素旋转以后，坐标轴也跟着发生的转变

4、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，参数为负表示相反方向倾斜，第二个参数不写默认为0。

5、矩阵matrix() 把所有的2D转换组合到一起，需要6个参数。

transform-origin可以调整元素转换的原点，但是对于transform: translate(x，y) 没有影响。

我们可以同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影转换的效果。

1.3 3D转换

1、左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图



2、左手法则

左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。

3、css中的3D坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。如下图



借助示例理解3D转换

a) 绕X轴旋转 rotateX，见代码示例01 3D转换-旋转rotateX.html

b) 绕Y轴旋转 rotateY，见代码示例02 3D转换-旋转rotateY.html

c) 绕Z轴旋转 rotateZ，见代码示例03 3D转换-旋转rotateZ.html

d) 在X轴移动 ，见代码示例04 3D转换-移动translateX.html

d) 在Y轴移动，见代码示例05 3D转换-移动translateY.html

d) 在Z轴移动，见代码示例06 3D转换-移动translateZ.html

4、透视（perspective）

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective有两种写法

a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素

b) 作为transform属性的一个值，做用于元素自身

见代码示例07 3D转换-透视perspective.html

5、理解透视距离



透视会产生“近大远小”的效果

7、3D呈现（transform-style）

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为变形原素。

flat：所有子元素在 2D 平面呈现

preserve-3d：保留3D空间

8、backface-visibility

设置元素背面是否可见

参考文档
http://isux.tencent.com/css3/index.html?transform

1.4 动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、必要元素：

a、通过@keyframes指定动画序列；

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素；

2、关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

d、animation-timing-function动画执行速度，linear、ease等

e、animation-play-state动画播放状态，running、paused等

f、animation-direction动画逆播，alternate等

g、animation-fill-mode动画执行完毕后状态，forwards、backwards等

h、animation-iteration-count动画执行次数，infinite等

i、steps(60) 表示动画分成60步完成

参数值的顺序：

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

CSS3动画库

animate.css