用CSS做自然过渡：从“看得到变化”到“体验到变化”

在网页上，用户最在意的不是炫技的动效，而是一抬手指就能感知到的平滑变化。CSS transition 让我们能用少量代码把状态切换做成自然、轻盈的体验，而不用写复杂的JS或动效引擎。

从场景出发：什么时候用 transition

想象你正在做一个信息卡片，点击按钮就能切换展示模式：从“概览”到“详情”，从“默认色”到“高亮色”。这时候 transition 就派上用场了。它能平滑地在不同样式之间过渡，让切换不突兀，提升可用性与舒适度。

核心概念与关键属性

• transition-property：指定需要过渡的属性，例如 background、transform、opacity 等。只写关键属性，不写无关项，能减少性能开销。
• transition-duration：控制过渡的持续时间，单位可为 s 或 ms。过长会拖慢体验，过短可能让人察觉不到变化。
• transition-timing-function：决定过渡的节奏，常用 linear（匀速）、ease（缓入缓出）、ease-in（缓入急出）、ease-out（急入缓出）、cubic-bezier()（自定义）。
• transition-delay：设置开始过渡的延时，用于构建更有趣的节奏，例如先延迟再切换。

实战思路：让变化“被感知”

设置基础状态

先确保元素有明确的初始状态和目标状态，否则过渡的方向与幅度没有依据。例如：

.card {
  background: #f0f0f0;
  transform: translateY(0);
  opacity: 1;
  transition: background 0.3s, transform 0.3s, opacity 0.3s ease;
}

切换状态时的触发

过渡通常由用户操作或页面状态变化触发，常见的是 :hover、:active 或 JavaScript 的 class 切换。直接操作 style 会触发重排，性能不如在 DOM 上切换 class。

.card.clicked {
  background: #d0d0d0;
  transform: translateY(-10px);
  opacity: 0.8;
}

<div class="card" onclick="this.classList.toggle('clicked')">切换模式</div>

通过节奏与延迟制造层次感

不要一开始就把 duration 设得很长，先让过渡“看得见”。结合 timing-function 与 delay，让切换更有呼吸感：

.card.clicked {
  transition-delay: 0.1s;
  animation-timing-function: ease-out;
}

避免过渡过度

过渡不是越多越好。对 transform、opacity、color 这类变化频率高的属性，设置过度会导致性能波动，甚至影响可读性。只在关键的视觉或状态切换上使用，优先选择 transform、opacity、background 等轻量属性。

常见坑点与优化

• 复合属性的过渡不完美：background 包含背景色与背景图片，两者变化速度不同，会导致图片突然出现或消失，可拆分为 background-color 与 background-image 分别设置。
• 过渡与动画的区别：transition 是属性变化时的平滑过渡，animation 是预定义的完整动效序列。若只是状态切换，transition 更轻量；若需要重复的完整动画，再考虑 animation。
• 浏览器兼容与性能：transition 在现代浏览器中兼容度较高，但对 transform 的过渡在旧版 IE 中可能不一致，必要时加入回退样式或用 JS 降级。

结尾

用 CSS transition 让页面的每一次状态切换都“被体验到”，是提升可用性与好感度的低成本改动。从卡片切换、按钮交互到表单反馈，都可以用它来简化设计。关键是围绕真实的交互场景去设计参数，让过渡既自然又不拖沓，从而在不增加复杂度的前提下，让页面更“有温度”。