Transition CSS: thuộc tính, thời gian, easing và độ trễ

Transition qua một ví dụ

Transition bảo trình duyệt: khi thuộc tính này thay đổi, hãy chuyển dần trong khoảng thời gian này thay vì đổi ngay lập tức. Đặt nó trong quy tắc bình thường của phần tử, không chỉ trong :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>

Hover vào nút đầu tiên: màu của nó chuyển dần sang xanh lá và nút nhích lên 4px trong 0,4 giây, còn khi bạn rời con trỏ đi, cùng transition đó chạy ngược lại. Nút thứ hai có transition: none nên đổi ngay tức thì. Người dùng bàn phím cũng thấy hiệu ứng tương tự qua :focus-visible.

Cách viết gọn transition

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

Thời lượng mặc định là 0s, nên không có gì chuyển động cho tới khi bạn đặt giá trị cho nó. Trong cách viết gọn, giá trị thời gian đầu tiên luôn là thời lượng và giá trị thứ hai là độ trễ. Muốn mỗi thuộc tính có cấu hình riêng, hãy ngăn cách chúng bằng dấu phẩy:

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

So sánh các timing function

Timing function quyết định tốc độ thay đổi ra sao trong suốt transition. Nhấn Play và cả bảy thanh sẽ đi cùng một quãng đường trong cùng 1,5 giây:

<!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>

Với hiệu ứng hover và menu, ease-out với thời lượng từ 150ms đến 300ms tạo cảm giác phản hồi nhanh.

Những gì có thể transition

Những thuộc tính có giá trị trung gian đều transition được: màu sắc, độ dài (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. Những thuộc tính nhảy giữa các từ khóa, như display hay font-family, sẽ đổi ngay lập tức.

height: auto là trường hợp hay gặp nhất: một panel mở từ height: 0 tới height: auto mặc định không có chuyển động, vì trình duyệt không tính các giá trị nằm giữa 0 và "auto". Một cách xử lý đáng tin cậy là dùng lớp bọc dạng grid với một hàng duy nhất đi từ 0fr tới 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 cho người dùng trình đọc màn hình biết panel đang mở hay đóng, điều mà riêng chuyển động không làm được.

Chạy code khi transition kết thúc

Sự kiện transitionend được kích hoạt khi một transition kết thúc, mỗi thuộc tính một lần. Dùng nó để làm gì đó sau chuyển động, chẳng hạn chuyển focus hoặc xóa một phần tử:

<!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>

Tôn trọng chế độ giảm chuyển động

Một số người bật "giảm chuyển động" trong cài đặt hệ thống vì chuyển động trên màn hình khiến họ chóng mặt hoặc mất tập trung. Hãy giữ các hiệu ứng mờ dần về màu và độ trong suốt, và bỏ các chuyển động lớn, bằng một media query:

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

Giữ transition mượt mà

transform và opacity là những thuộc tính tạo chuyển động nhẹ nhất: trình duyệt có thể di chuyển và làm mờ phần tử mà không phải tính lại bố cục. Transition cho width, height, top hay margin khiến trình duyệt phải dàn lại trang ở mỗi khung hình, có thể bị giật trên điện thoại yếu. Để di chuyển một thứ gì đó, hãy ưu tiên transform: translate() thay vì left hay margin. Trang transform giải thích các hàm này.

Lỗi thường gặp

• transition chỉ nằm trong quy tắc :hover. Hiệu ứng chuyển động khi vào nhưng giật về khi hết hover. Hãy đặt transition trong quy tắc gốc.
• Thời lượng thiếu đơn vị. transition: opacity 300 không hợp lệ. Hãy viết 300ms hoặc 0.3s.
• transition: all. Nó tạo chuyển động cho mọi thuộc tính thay đổi, kể cả những thuộc tính bạn không định làm, và có thể khiến các thay đổi bố cục bị chậm chạp. Hãy liệt kê cụ thể các thuộc tính.
• Tưởng display: none sẽ mờ dần. display đổi ngay lập tức. Hãy làm mờ opacity (và đặt visibility: hidden khi hiệu ứng mờ kết thúc).
• Transition tới height: auto. Nó sẽ nhảy cái rụp. Hãy dùng kỹ thuật grid-template-rows ở trên.
• Thời lượng dài cho tương tác nhỏ. Bất cứ thứ gì dài hơn khoảng 400ms trên nút hay menu đều tạo cảm giác chậm.