CSS transition 过渡：属性、时长、缓动与延迟

一个例子看懂过渡

过渡告诉浏览器：这个属性改变时，在这段时间内平滑地变化，而不是瞬间切换。把它写在元素的常规规则里，而不是只写在 :hover 上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

把鼠标悬停在第一个按钮上：它的颜色在 0.4 秒内渐变成绿色，同时上移 4px；鼠标移开时，同样的过渡会反向播放。第二个按钮设置了 transition: none，会瞬间切换。键盘用户通过 :focus-visible 也能得到同样的效果。

transition 简写

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

时长的默认值是 0s，所以在你设置时长之前什么都不会动。在简写中，第一个时间值总是时长，第二个是延迟。要给不同属性设置不同参数，用逗号分隔：

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

缓动函数并排对比

缓动函数决定过渡过程中速度如何变化。点击 Play，七个条会在同样的 1.5 秒内移动同样的距离：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

对于悬停效果和菜单，ease-out 配合 150ms 到 300ms 之间的时长，手感最灵敏。

哪些属性可以过渡

有中间值的属性都可以过渡：颜色、长度（width、padding、margin）、opacity、transform、box-shadow、border-radius、filter、background-color。在关键字之间跳变的属性，比如 display 或 font-family，会瞬间切换。

最常踩的坑是 height: auto：一个从 height: 0 展开到 height: auto 的面板默认不会有动画，因为浏览器不会计算 0 和“auto”之间的值。一个可靠的变通方法是使用 grid 包裹元素，让它唯一的一行从 0fr 变到 1fr：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

aria-expanded 告诉读屏软件用户面板是否已展开，这是动画本身无法传达的。

过渡结束时运行代码

过渡结束时会触发 transitionend 事件，每个属性触发一次。可以用它在动画之后做些事情，比如移动焦点或移除元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

尊重减少动态效果的设置

有些人会在系统设置里打开“减少动态效果”，因为屏幕上的运动会让他们头晕或分心。用一个媒体查询保留颜色和透明度的渐变，去掉大幅度的移动：

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

让过渡保持流畅

transform 和 opacity 是做动画开销最小的属性：浏览器移动元素或让它淡入淡出时，不需要重新计算布局。过渡 width、height、top 或 margin 会让浏览器在每一帧都重新排版页面，在性能较差的手机上可能会卡顿。要移动某个元素，优先用 transform: translate()，而不是 left 或 margin。transform 页面介绍了这些函数。

常见错误

• transition 只写在 :hover 规则里。效果进入时有动画，但悬停结束时会直接跳回。把 transition 写在基础规则上。
• 时长没有单位。transition: opacity 300 是无效的。写成 300ms 或 0.3s。
• 使用 transition: all。它会让每个发生变化的属性都做动画，包括你并不想做动画的属性，还可能让布局变化变得迟缓。把属性逐一列出来。
• 以为 display: none 会淡出。display 会瞬间切换。改为让 opacity 淡出（并在淡出结束时设置 visibility: hidden）。
• 过渡到 height: auto。它会直接跳变。使用上面介绍的 grid-template-rows 技巧。
• 小交互用了很长的时长。按钮或菜单上超过大约 400ms 的过渡都会显得慢。