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