11.4 CSS 转换（transitions）

优质

小牛编辑

132浏览

2023-12-01

本特性是实验性的
本特性相关的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;}

Without transition With transition

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

转换持续时间（transition-duration）

transition-duration 是创建 transition 的唯一必选参数。它可以使用秒或毫秒来做时间单位，比如：2s 或 100ms。

如果你想转换持续半秒，可以写成 0.5s 或 500ms。

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;}

Without transition A 0.5s transition A 3s transition

转换属性（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;}

Without transition With only background transition With all transitions

上面的第三个链接的 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秒钟延迟 #result-841{ padding: 1rem;} #result-841 a{ background: lightgrey; color: grey; margin-right: 10px; padding: 5px 10px; transition: none;} #result-841 a:hover{ background: yellow; color: red;} #result-841 .with-transition{ transition: 1s} #result-842{ padding: 1rem;} #result-842 a{ background: lightgrey; color: grey; margin-right: 10px; padding: 5px 10px; transition: none;} #result-842 a:hover{ background: yellow; color: green;} #result-842 .with-fast-transition{ transition: 0.5s;} #result-842 .with-slow-transition{ transition: 3s;} #result-843{ padding: 1rem;} #result-843 a{ background: lightgrey; color: grey; margin-right: 10px; padding: 5px 10px; transition: none;} #result-843 a:hover{ background: yellow; border: 5px solid blue; color: green;} #result-843 .with-background-transition{ transition: 2s; transition-property: background;} #result-843 .with-all-transition{ border: 0px solid blue; transition: 2s;} #result-844{ padding-bottom: 1rem;} #result-844 div{ background: crimson; height: 20px; left: 0; margin-top: -1rem; position: relative; transition: 1s; width: 20px;} #result-844:hover div{ left: 200px;} #result-844 p{ color: grey;} #result-844 p strong{ font-weight: bold;} #result-844 .ease{ transition-timing-function: ease;} /* Default behavior */ #result-844 .linear{ transition-timing-function: linear;} /* Constant speed */ #result-844 .ease-in{ transition-timing-function: ease-in;} #result-844 .ease-out{ transition-timing-function: ease-out;} #result-844 .ease-in-out{ transition-timing-function: ease-out;} #result-844 p:nth-child(1) strong{ color: crimson;} #result-844 div:nth-child(2){ background: crimson;} #result-844 p:nth-child(3) strong{ color: midnightblue;} #result-844 div:nth-child(4){ background: midnightblue;} #result-844 p:nth-child(5) strong{ color: mediumseagreen;} #result-844 div:nth-child(6){ background: mediumseagreen;} #result-844 p:nth-child(7) strong{ color: orangered;} #result-844 div:nth-child(8){ background: orangered;} #result-844 p:nth-child(9) strong{ color: darkviolet;} #result-844 div:nth-child(10){ background: darkviolet;} #result-845{ padding: 1rem;} #result-845 div{ background: lightgrey; padding: 1rem; width: 400px;} #result-845 div p{ color: grey; margin-top: 0;} #result-845 a{ background: rgba(129, 129, 224, 0.8); color: white; padding: 5px 10px; text-decoration: none; transition: all 1s;} #result-845 div:hover a{ background: red;} #result-845 a.with-delay{ transition-delay: 2s;}