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,播放。例如,上例动画效果中,如果希望鼠标抓住小球(悬停在小球上)就停止播放动画,鼠标离开小球就继续播放动画,可使用如下代码:
以上圆球动画的完整代码如下:
最后,还有一个与动画有关的属性:animationfillmode。其用于规定动画在播放前或播放后的状态。其取值可以是:
(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; }
至此,商品广告的动画效果就完成了。