CSS：权威指南，第 5 版

第 18 章 过渡 过渡

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

CSS过渡让我们可以将 CSS 属性从原始值随时间变化为新值。 这些变化将元素从一种状态过渡到另一种状态，以响应变化。这通常涉及用户交互，但也可能是由于类、ID 或其他状态的脚本变化。

通常情况下，当 CSS 属性值发生变化时，即样式变化事件发生时，变化是瞬时的。新的属性值会在重新绘制页面（或必要时回流和重新绘制）所需的毫秒时间内取代旧的属性值。大多数值的更改似乎都是瞬时的，渲染时间少于 16 毫秒。即使变化所需的时间比这更长（比如用一张未预取的图片替换一张大图片，这并不是过渡，只是性能不佳），从一个值到下一个值仍然只需要一个步骤。例如，在鼠标悬停时更改背景颜色，背景会立即从一种颜色变为另一种颜色，没有渐变过渡。

CSS 过渡

CSS 过渡提供了一种方法，可以控制属性在一段时间内如何从一个值变为下一个值。 因此，我们可以让属性值逐渐变化，从而产生（希望）令人愉悦且不突兀的效果。例如

button {color: magenta;
    transition: color 200ms ease-in 50ms;
}
button:hover {color: rebeccapurple;
    transition: color 200ms ease-out 50ms;
}

在本例中，该transition 属性并不是在悬停时立即改变按钮的color 值，而是意味着按钮的color 将在 200 毫秒内从magenta 逐步淡化到rebeccapurple ，甚至在开始过渡前增加了 50 毫秒的延迟。

万一浏览器不支持 CSS 过渡属性，那么变化将是即时的，而不是渐进的，这完全没有问题。如果给定的属性或某些属性值不可动画化，那么同样也是立即变化而不是渐变。

备注

当 我们说可动画化时，我们指的是任何可以动画化的属性，无论是通过转场还是动画（下一章第 19 章的主题）。本书中的属性定义框都会指明某个属性是否可动画化。

通常情况下，您需要瞬时的数值变化。例如，链接的颜色通常会在悬停或聚焦时立即改变，从而告知视力正常的用户正在进行交互，并且聚焦的内容是一个链接。同样，自动完成列表框中的选项也不应该淡入：您希望选项立即出现，而不是在用户输入后才慢慢淡入。瞬时值变化通常是最好的用户体验。

在其他情况下，您会希望属性值的变化更加渐进，从而引起人们的注意。 例如，您可能希望用 200 毫秒的时间制作翻牌动画，使纸牌游戏更加逼真，因为如果没有动画，用户可能不会意识到发生了什么。

提示

查找 "播放 "符号 了解在线示例的可用性。本章的所有示例均可在https://meyerweb.github.io/csstdg5figs/18-transitions 上找到。

再比如，你可能希望某些下拉菜单在 200 毫秒内展开或变为可见（而不是瞬间出现，那样可能会很刺眼）。通过过渡效果，你可以让下拉菜单慢慢出现。在图 18-1中 中，我们通过缩放变换来改变子菜单的高度。这也是 ...