html基础巩固（3）动画

6.3  过渡与动画

过渡就是让CSS属性在一段时间内平缓变化。平缓变化的效果比突然变化的效果更柔和、更自然。

6.3.1  过渡属性

若希望修改某个CSS属性值时变化平缓，可使用CSS的transition-property属性，其值可以是一个或多个具体属性名，多个属性名之间用空格分隔。如果希望所有CSS属性的变化都是平缓变化，可设置transition-property属性值为all。但是，并不是所有属性都支持过渡效果。其中，支持过渡效果的属性有：颜色属性、取值为数字的属性、转换属性、阴影属性、渐变属性、visibility属性。

实现过渡效果，不但要设置平缓变化的属性名，还要设置变化的持续时间，来控制变化速度。可使用transition-duration属性设置变化持续的时间。其值为一个带单位的数字。时间段的单位可以是秒（s）或毫秒（ms）。

有了transition-property和transition-duration属性，就可以实现过渡效果了。例如，在5.7.4实验：实现电商网站商品列表中，当鼠标悬停在商品卡片上时，卡片变大。但是，如果是突然变大，则用户体验会较差。此时，就可让卡片的变大平缓过渡，让放大和阴影经过2s平缓变化，修改CSS代码如下：

除了可以定义平缓变化的属性和持续时间外，还可定义另外两个属性：

（1）transition-timing-function属性，指定过渡的速度变化曲线。其取值可以是：

① ease，默认值，表示变化从慢速开始，逐渐变快，最后慢速结束。

② linear，表示匀速变化。该值使用最多。

③ ease-in，表示慢速开始，加速结束。

④ ease-out，表示快速开始，慢速结束。

⑤ ease-in-out，表示慢速开始和结束，中间先加速后减速。

（2）transition-delay属性，让过渡延迟一段时间执行。其值为以s或ms为单位的数字。

其实，过渡属性有一种简写形式，可通过一条语句设置多个过渡属性的特性，如下所示：

transition:属性名持续时间速度变化曲线延迟时间;

其中，速度变化曲线和延迟时间，如无特别需要，可省略。因此，上例中修改商品卡片大小为平滑过渡的代码，最简化的写法为：

需要特别注意的是，transition属性既可放在普通选择器中，也可放在动态变化的伪类选择器中。但是，如果放在伪类选择器中，只能控制放大时有过渡效果。失去:hover状态，图片在缩小时，还是会突然发生变化。这是因为一旦元素失去:hover状态，transition属性就不在元素上，无法平缓过渡。所以，若希望放大和缩小时都能平缓过渡，就必须将transition属性定义在普通选择器上，使其常驻元素。因此，修改商品卡片大小的平缓过渡代码，应放在.product选择器中。代码如下：

6.3.2  声明动画

动画可使元素从一种样式逐渐变化为另一种样式，它通过关键帧来控制动画的每一步。关键帧是用于定义动画执行过程中，某个中间状态的一套样式。一个动画由多个关键帧组成。动画就是从一个关键帧连续过渡变化到下一个关键帧的过程，如图6-20所示。

图6-20  关键帧

在CSS中定义复杂动画，其实就是定义一组关键帧的集合，并起一个统一的名字。定义关键帧的语法结构如下：

以上动画定义中，通常起始第一帧（0%）和最后一帧（100%）是必须有的。中间的样式可按需要定义一个或多个帧。例如，要定义如图6-20所示由5帧组成的动画，可使用如下代码：

其中，每一帧都按照动画的要求，不断改变圆的位置和大小。

6.3.3  调用动画

定义好的动画，不能自动执行，必须调用才能执行。CSS中可通过以下一系列属性，在某个选择器中调用动画，将动画应用到选择器所获得的元素上执行：

（1）animation-name属性，指定要调用的动画名称。

（2）animation-duration属性，指定动画执行一个周期的时长。其值是以s或ms为单位的数字。

（3）animation-timing-function属性，指定动画的速度变化曲线。其取值可以是ease、linear、ease-in、ease-out、ease-in-out。

（4）animation-delay属性，指定动画延迟执行的时间。其值是以s或ms为单位的数字。

（5）animation-iteration-count属性，指动画的播放次数。其值可以是具体数字，也可以是infinite，表示无限次播放。

（6）animation-direction属性，指定动画的播放方向。其值可以是以下3种情况：

① normal，默认值，表示正常播放（0~100%）。

② reverse，表示逆向播放（0~100%）。

③ alternate，表示轮流播放，即奇数次播放时，正常播放（0~100%），偶数次播放时，逆向播放（0~100%）。

下面，我们调用上一节定义的动画“ball”执行一次，查看效果。调用动画的代码如下：

如果希望动画交替反复，无限循环执行，可再追加如下代码：

其实，调用动画也有简写形式，语法如下：

animation:动画名 持续时间 速度变化曲线 延迟时间 反复执行次数 执行方向;

除前两个值是必需的，后续几个值均是按需加入的。例如，调用上例动画，可简写为：

animation:ball 5s linear infinite alternate;

其实，CSS中也可控制动画的播放与暂停。使用animation-play-state属性，可定义动画播放或暂停。其值有两个：paused，暂停；running，播放。例如，上例动画效果中，如果希望鼠标抓住小球（悬停在小球上）就停止播放动画，鼠标离开小球就继续播放动画，可使用如下代码：

以上圆球动画的完整代码如下：

最后，还有一个与动画有关的属性：animationfillmode。其用于规定动画在播放前或播放后的状态。其取值可以是：

（1）none，默认值。

（2）forwards，表示动画播放完之后，将保持在最后一个帧的状态上。

（3）backwards，表示动画播放前，延迟时间内，动画保持在第一个帧的状态上。

（4）both，相当于同时设置forwards和backwards。

6.3.4  实验：实现产品介绍动效

下面，我们就利用CSS3的动画效果，实现一个炫酷的商品广告3D展示功能。本次实验主要实现网站首页产品介绍动画效果。商品广告3D展示效果如图6-21所示。

图6-21  商品广告3D展示效果

首页广告展示的动画效果一共有6张广告图片，围成一圈，均匀分布。下一张图片都比当前图片多旋转60°。所有图片的旋转原点都是图片中心向z轴反向倒退365px，也就是在-365px的位置。另外，如果想要让6张图片呈三维方式展现，且将来可以整体旋转，那么，在6张图片外围，至少还需要有两级父元素。如图6-22所示。

图6-22  3D展示原理

接下来，我们首先定义广告展示的静态内容和结构。HTML和CSS代码如下：

至此，广告旋转动画的静态展示就做完了。接下来，我们定义动画效果。广告整体的动画效果，其实就是让内层div，带着内部6张图片，整体旋转一周，并循环播放。代码如下：

如果希望当鼠标悬停在广告上时，暂停动画，可使用如下代码：

div.ban:hover{ animation-play-state: paused; }

至此，商品广告的动画效果就完成了。