CSS 过渡

CSS 过渡是一种在修改 CSS 属性时添加中间步骤的机制。默认情况下，对 CSS 属性所做的任何更改都会立即生效。而 CSS 过渡则会在可配置的时间段内逐步应用这些变化，中间过程由浏览器自动计算。

对于熟悉 CSS 动画的开发者来说，CSS 过渡可能看起来像是动画的一个简化版本。两者之间存在一些差异。例如，CSS 过渡只有两个状态：初始状态和最终状态，并且采用基于动作的触发机制，意味着必须有某种触发条件才能启动过渡效果，比如添加一个类名，或元素的伪类（如 hover 或 focus）。

CSS 过渡：示例

改变不透明度

我们来看一个改变元素不透明度的例子。将元素的不透明度从 1 变为 0.5 时，元素会立即发生变化。但如果添加一个持续几毫秒的过渡效果，就会实现更柔和的淡入淡出效果。

忽略为元素添加样式的代码，下面代码片段中有两个关键部分——transition 属性（第 4 行）和 opacity 属性（第 6 行）。

• opacity：定义应用于元素的不透明度。
• transition：定义不透明度变化如何应用到元素上。

1// main.scss
2
3.box {
4  transition: opacity 0.5s ease-in;
5  &:hover {
6    opacity: 0.5;
7  }
8}

下方输出包含两个方块，一个带有 CSS 过渡，另一个没有。将鼠标悬停在每个方块上，观察它们不透明度变化的区别。标有“带过渡”的方块在不透明度变化时呈现渐变效果，而标有“无过渡”的方块则立即完成变化。

移动元素

再看一个过渡效果更明显的例子。我们将比较两个元素从一个位置移动到另一个位置的情况。其中一个元素设置了过渡，另一个没有。

忽略为元素添加样式的代码，下面代码片段中的两个关键部分是——transition 属性（第 4 行）和 transform 属性（第 6 行）。

• transform：定义应用于元素的实际变换（位置、缩放、旋转等）。
• transition：定义变换如何应用到元素上。

1// main.scss
2
3.box {
4  transition: transform 0.5s ease-in;
5  &:hover {
6    transform: translateY(100px);
7  }
8}

下方输出包含两个方块，一个带有过渡，另一个没有。将鼠标悬停在每个方块上，观察它们移动方式的区别。

从上面的例子可以看出，添加变换显著提升了用户体验，使操作更加流畅自然。从代码角度看，这两个元素之间的唯一区别只是一行代码（第 24 行）：

1transition: transform 0.5s ease-in;

注意：某些属性无法进行过渡，因为它们不是可动画的属性。此外，不同的可动画属性在动画过程中消耗的性能也不同。有些属性动画成本更高。我们将在后续课程《动画性能》中深入探讨这一问题。

浏览器支持

目前所有主流现代浏览器均支持 CSS 过渡。更多关于各浏览器支持情况的详细信息，请参考 Can I use 的最新数据。