学习笔记 第十四章 使用CSS3动画

第14章   使用CSS3动画

【学习重点】

• 设计2D动画
• 设计3D动画
• 设计过渡动画
• 设计帧动画
• 能够使用CSS3动画功能设计页面特效样式

14.1  设计2D动画

CSS2D Transform表示2D变换，目前获得了各主流浏览器的支持；CSS3D Transform支持程度不是很完善，仅能够在部分浏览器中获得支持。语法如下：

transform:none | <transform-function> [ <transform-function>]*;

• transform属性的初始值是none，适用于块元素和行内元素。
• <transform-function>设置变换函数。可以是一个或多个变换函数列表。transform-function函数包括matrix()、translate()、scale()、scaleX()、scaleY()、rotate()、skewX()、skewY()、skew()等。

  关于这些常用变换函数的功能简单说明如下：

  • matrix()：定义矩阵变换，即基于X和Y坐标重新定位元素的位置；
  • translate()：移动元素对象，即基于X和Y坐标重新定位元素；
  • scale()：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数和负数，以及小数；
  • rotate()：旋转元素对象，取值为一个度数值；
  • skew()：倾斜元素对象，取值为一个度数值。

14.1.1 定义旋转

rotate()函数能够旋转指定的元素对象，主要在二维空间内进行操作，接收一个角度参数值，用来指定旋转的幅度，语法如下：

rotate(<angle>);

14.1.2 定义缩放

scale()函数能够缩放元素大小，该函数包含两个参数值，分别用来定义宽和高缩放比例。语法如下：

scale(<number>[, <number>]);

<number>参数值可以是正数、负数和小数。正数值基于指定的宽度和高度将放大元素。负数值不会缩小元素，而是翻转元素（如文字反转），然后再缩放元素。使用小于1的小数可以缩放元素。如果第2个参数省略，则第二个参数等于第一个参数值。

14.1.3 定义移动

translate()函数能够重新定位元素的坐标，该函数包含两个参数值，分别用来定义x轴和y轴坐标。语法如下：

translate(<translation-value>[,<translation-value>]);

14.1.4 定义倾斜

skew()函数能够让元素倾斜显示，该函数包含两个参数值，分别用来定义x轴和y轴坐标倾斜的角度，语法如下：

skew(<angle> [, <angle>]);

<angle>参数表示角度值，第一个参数表示相对于x轴进行倾斜，第二个参数表示相对于y轴进行倾斜，如果省略了第二个参数，则第二个参数值默认值为0。

14.1.5 定义矩阵

matrix()是矩阵函数，调用该函数可以非常灵活地实现各种变换效果。matrix()函数的语法如下：

matrix(<number>,<number>,<number>,<number>,<number>,<number>);

六个参数分别负责控制x轴缩放，x轴倾斜，y轴倾斜，y轴缩放，x轴移动，y轴移动。使用前面4个参数的配合，可以实现旋转效果。

14.1.6 定义变换原点

CSS变换的原点默认为对象的中心点，如果要改变这个中心点，可以使用transform-origin属性进行定义。语法如下：

transform-origin:[[<percentage>|<length>| left | center | right] [<percentage>|<length>| top | center | bottom]?] | [[ left | center | right ] || [ top | center | bottom ]]

transform-origin属性的初始值为50% 50%，适用于块状元素和内联元素。transform-origin接收两个参数，可以是百分比、em、px等具体的值，也可以是left、center、right或者top、middle、bottom等描述性关键字。

14.2  设计3D变换

CSS3的3D变换主要包括的函数如下：

• 3D位移：包括translateZ()和translate3d()函数；
• 3D旋转：包括rotateX()、rotateY()、rotateZ()和rotate3d()函数；
• 3D缩放：包括scaleZ()和scale3d()函数；
• 3D矩阵：包含matrix3d()函数。

考虑到浏览器兼容性，主流浏览器对3D变换支持不是很好，具体如下：

• IE10+，3D变换部分未得到很好支持；
• Firefox10.0至Firefox15.0版本浏览器，在使用3D变换时应添加私有属性-moz-，Firefox16.0+版本无需添加私有属性；
• Chrome12.0+版本中使用3D变换时需要添加私有属性-webkit-；
• Safari4.0+版本中使用3D变换时需要添加私有属性-webkit-；
• Opera15.0+版本才开始支持3D变换，使用时需要添加私有属性-webkit-；
• 移动设备中iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+都支持3D变换，但在使用时需要添加私有属性-webkit-，Firefox for Android19.0+支持3D变换，武学添加浏览器私有属性。

14.2.1 定义位移

在CSS3中，3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数是一个元素在三维空间移动。语法如下：

translate3d(tx,ty,tz);

• tx：代表横向坐标位移向量的长度；
• ty：代表纵向坐标位移向量的长度；
• tz：代表Z轴位移向量的长度，不能为一个百分比值。

当tz值越大，元素离浏览者更近，视觉上元素变得更大；反之其值越小，元素离浏览者更远。

translateZ()函数可以让元素在Z轴进行位移，用法如下：

translateZ(t);

参数值指的是Z轴的向量位移长度。

使用translateZ()函数可以让元素在Z轴进行位移，当其值为负值时，元素在Z轴越离越远，元素变小；反之，当t为正值时，元素在Z轴上越移越近，元素变大。

在实际应用中，translateZ(t)函数等效于translate3d(0,0,tz)。

14.2.2 定义缩放

CSS3 3D缩放主要有scaleZ()和scale()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，效果等同于scaleZ(sz)。

默认值为1，当值大于1时，元素放大；反之小于1大于0.01时，元素缩小。语法如下：

scale3d(sx,sy,sz);

• sx：横向缩放比例；
• sy：纵向缩放比例；
• sz：Z轴缩放比例。

scaleZ(s);

s指元素每个点在Z轴的比例。

scaleZ(-1)定义了一个原点在Z轴的对称点（按照元素的变换原点）。

scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其它的变换函数一起使用才有效果。

14.2.3 定义旋转

在3D变换中，可以让元素在任何轴旋转。CSS3新增了3个旋转函数：rotateX()、rotateY()和rotateZ()。基本语法为：

rotateX(a);
rotateY(a);
rotateZ(a);

a指的是一个旋转角度值，可以是正值也可以是负值。正值表示元素围绕轴顺时针旋转，反之逆时针旋转。

还有一个rotate3d()函数，在3D空间，旋转一个[x,y,z]向量并经过元素原点。语法如下：

rotate3d(x,y,z,a);

x、y、z是0到1之间的数值，主要用来描述元素围绕X/Y/Z轴旋转的矢量值；a是一个角度值，主要用来指定元素在3D空间旋转的角度，为正值则元素顺时针旋转，反之逆时针旋转。

14.3  设计过渡动画

CSS3使用transition属性定义过渡动画，目前获得所有浏览器支持。

14.3.1 设置过渡属性

transition-property属性用来定义过渡动画的CSS属性名称，语法如下：

transition-property: none | all | [<IDENT> ] [ ',' <IDENT> ]*;

• none：表示没有元素；
• all：默认值，表示针对所有元素，包括:before和:after伪元素；
• IDENT：指定CSS属性列表。

14.3.2 设置过渡时间

transition-duration属性用来定义转换动画的时间长度，语法如下：

transition-duration:<time>[ ,<time>]*;

初始值为0，适用于所有元素，以及:before和:after伪元素。默认情况下，动画过渡时间为0。

14.3.3 设置延迟时间

transition-delay属性用来定义开启过渡动画的延迟时间，语法如下：

transition-delay:<time> [, <time>]*;

初始值为0，适用于所有元素，以及:before和:after伪元素。设置时间可以是正整数、负整数和零。设置为非零值时，必须带上单位——s或ms。

为负数时，过渡动画会从该时间点开始，之前的动画会被截断；

为正数时，过度动画会延迟触发。

14.3.4 设置过渡动画类型

transition-timing-function属性用来定义过渡动画的类型，语法如下：

transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) ]*

• ease：平滑过渡，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，即立方贝塞尔；
• linear：线性过渡，等同于cubic-bezier(0,0,1.0,1.0)函数；
• ease-in：由慢到快，等同于cubic-bezier(0,0,0.58,1.0)函数；
• ease-out：由快到慢，等同于cubic-bezier(0.42,0,0.58,1.0)函数；
• cubic-bezier：特殊的立方贝塞尔曲线效果。

14.3.5  设置触发方式

CSS3动画一般通过鼠标事件火庄台定义动画，如CSS伪类和JavaScript事件。

动态伪类	作用元素	说明
:link	只有链接	未访问的链接
:visited	只有链接	访问过的链接
:hober	所有元素	鼠标经过元素
:active	所有元素	鼠标点击元素
:focus	所有可被选中的元素	元素被选中

JavaScript事件包括click、focus、mousemove、mouseover、mouseout等。

14.4  设计帧动画

CSS3使用animation属性定义帧动画。最新版本主流浏览器均支持CSS帧动画。

animation和transition属性功能相同——通过改变元素的属性值实现动画效果。区别在于：

animations通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果；

transitions通过指定属性的开始值与结束值，以及这两个属性值之间进行过渡的方式，实现比较简单的动画效果。

14.4.1 设置关键帧

CSS3使用@keyframes定义关键帧，用法如下：

@keyframes animationname{
      keyframes-selector{
           css-styles;
      }
}

• animationname：定义动画的名称；
• keyframes-selector：定义帧的时间未知，也就是动画时长的百分比，合法值有0~100%、from（等价于0%）、to（等价于100%）；
• css-styles：表示一个或多个合法的CSS样式属性。

14.4.2 设置动画属性

1. 定义动画名称

   使用animation-name属性定义CSS动画名称，语法如下：

   animation-name:none | IDENT [, none | IDENT ]*;

   初始值为none，定义一个适用的动画列表。每个名字用来选择关键帧，提供属性值；如名称为none，不会有动画。

2. 定义动画时间

   animation-duration定义动画播放时间，语法如下：

   animation-duration:<time> [, <time>]*;

   默认值为0，不会有动画。若为负值，视为0。

3. 定义动画类型

   animation-timing-function定义动画类型，语法如下：

   animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) ]*

   初始值为ease，取值参考transition-timing-function。

4. 定义延迟时间

   animation-delay定义CSS动画延迟播放的时间，参考transition-delay。

5. 定义播放次数

   animation-iteration-count属性定义动画播放的次数，语法如下：

   animation-iteration-count:infinite | <number> [, infinite | <number>]*;

   默认值为1，infinite表示无限次。如果取值为非整数，导致动画结束一个周期的一部分；取值为负值，在交替周期内反向播放动画。

6. 定义播放方向

   animation-direction属性定义动画的播放方向，语法如下：

   animation-direction:normal | alternate [, normal | alternate]*;

   默认值为normal。为normal时，动画的每次循环向前播放；为alternate时，偶数次向前播放，奇数次向反方向播放。

7. 定义播放状态

   animation-play-state定义动画正在运行还是暂停，语法如下：

   animation-play-state: paused | running;

   初始值为running，paused定义动画暂停，running定义动画正在播放。

8. 定义播放外状态

   使用animation-fill-mode属性定义动画外状态，语法如下：

   animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both ]*;

   初始值为none，如果提供多个属性值，以逗号分隔。取值说明如下：

   • none：不设置动画外的状态；
   • forwards：设置对象状态为动画结束时的状态；
   • backwards：设置对象状态为动画开始时的状态；
   • both：设置对象状态为动画结束或开始的状态。