11.5 CSS 转换(transitions)

定义CSS规则(样式)之间的切换

本特性是实验性的
本特性相关的W3规范尚未被最后确定。使用时请检查浏览器兼容表以及属性的浏览器前缀。尽管CSS3的一些高级特性没有被最终确定,但在Chrome/Safari/Firefox等现代浏览器上已经得到了广泛的支持。使用这些特性时,只要在目标设备上做好兼容性测试就好。后面不再重复。

HTML元素有不同的状态,状态之间切换的平滑过渡效果可以通过transitions来定义。

你可以定义:

  • transition-property: 哪个属性要应用渐变动画
  • transition-duration: 渐变动画持续时间
  • transition-timing-function: 中间状态如何计算
  • transition-delay: 何时开始启动渐变动画

我们可以单独设置这些属性,也可以使用速写版本:transition。速写方式下只有持续时间(duration)的定义是必须的:

transition: property duration timing-function delay;

记住,转换(transition)本质上就是一个特定类型的动画,这个动画由开始状态、终止状态以及过渡过程来定义。

一个颜色转换的例子

转换(transitions)常被用于悬停状态

a{ background: lightgrey; color: grey;}
a:hover{ background: yellow; color: red;}
a.with-transition{ transition: 1s;}

上面的第一个链接被悬停时,马上切换到了新的颜色,第二个链接在悬停时,缓缓地切换到新的颜色。显然使用transition,可以获得更柔和平滑的交互体验。

转换持续时间(transition-duration)

transition-duration 是创建 transition 的唯一必选参数。它可以使用秒或毫秒来做时间单位,比如:2s100ms

如果你想转换持续半秒,可以写成 0.5s500ms

a{ background: lightgrey; color: grey;}
a:hover{ background: yellow; color: green;}
a.with-fast-transition{ transition-duration: 0.5s;}
a.with-slow-transition{ transition: 3s;}

转换属性(transition-property)

transition-property用来定义哪个属性要应用转换动画,只有1/3的CSS属性支持转换动画。可以在Mozilla网站上查阅完整列表:CSS动画属性

缺省情况下,transition-property 的取值为 all,也就是说将对所有可能的属性应用转换动画。

我们当然可以用 transition-property 来限定某个或某些属性:

a{ background: lightgrey; color: grey;}
a:hover{ background: yellow; border: 5px solid blue; color: green;}
a.with-background-transition{ transition-duration: 2s; transition-property: background;}
a.with-all-transition{ transition-duration: 2s;}

上面的第三个链接的 border 属性也被应用了转换动画,2秒内从0到5px宽度的缓慢增长。

转换时变函数(transition-timing-function)

转换时变函数用来确定每个属性在转换过程中取值如何计算。

缺省情况下,转换过程是 缓动的(eased):时变特征是在起点处加速,在终点处减速。

我们可以把 transition 看作是一个匀速过程,而时变函数则给这个过程添加了加减速的变量。

我们用下面的动画来演示各个缓动时变函数的实际效果:

div{ left: 0; position: relative; transition: 1s;}
main:hover div{ left: 200px;}
.ease{ transition-timing-function: ease;} /* Default behavior */
.linear{ transition-timing-function: linear;} /* Constant speed */
.ease-in{ transition-timing-function: ease-in;}
.ease-out{ transition-timing-function: ease-out;}
.ease-in-out{ transition-timing-function: ease-out;}
<main>
  <p><strong>Ease</strong>: 启动慢, 中间快, 停止慢</p>
  <div class="ease"></div>
  <p><strong>Linear</strong>: 匀速</p>
  <div class="linear"></div>
  <p><strong>Ease In</strong>: 启动慢, 停止快</p>
  <div class="ease-in"></div>
  <p><strong>Ease Out</strong>: 启动快, 停止慢</p>
  <div class="ease-out"></div>
  <p><strong>Ease In Out</strong>: 和 ease 类似,但是有更为明显的加减速曲线</p>
  <div class="ease-in-out"></div>
</main>

Ease: 启动慢, 中间快, 停止慢

Linear: 匀速

Ease In: 启动慢, 停止快

Ease Out: 启动快, 停止慢

Ease In Out: 和 ease 类似,但是有更为明显的加减速曲线

需要注意的是,上面所有的转换时间是相同的(都是1秒)。

还有其他一些ease系列的转换函数,要查看其效果,可以访问 缓动函数列表

三次贝塞尔(cubic-bezier)

如果所有上述预定义的时变函数满足不了要求,我们还可以使用cubic bezier方法来自定义转换过程。

这个站点 cubic-bezier.com 提供简单的可视化工具来编写自定义的时变曲线。可以自动生成CSS代码。

转换延迟(transition-delay)

transition-delay 用来定义在动画开始之前需要等待多长时间。

transition-duration 一样,你可以使用秒或毫秒来定义。

a{ background: blue; color: white; transition: all 1s;}
div:hover a{ background: red;}
a.with-delay{ transition-delay: 2s;}
<div>
  <p>请悬停在本灰色区域并等待2秒</p>
  <a>没有延迟</a>
  <a class="with-delay">有一秒钟延迟</a>
</div>

请悬停在本灰色区域并等待2秒

没有延迟 有2秒钟延迟