Sử dụng thuộc tính transition-timing-function trong CSS

Tổng quan transition-timing-function

Thuộc tính transition-timing-function định nghĩa **cách tốc độ thay đổi** trong quá trình transition. Nó không thay đổi thời lượng (duration) mà thay đổi **phân bố tốc độ** theo thời gian.

Cú pháp

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | steps();

Ví dụ cơ bản (2 hiệu ứng)

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      transition: width 4s;
    }
    #effect1 { transition-timing-function: linear; }
    #effect2 { transition-timing-function: ease-in; }
    div:hover { width: 250px; }
  </style>
</head>
<body>
  <h1>Transition Effect</h1>
  <p>Hover vào các hộp để thấy khác biệt:</p>
  <div id="effect1">linear</div><br>
  <div id="effect2">ease-in</div><br>
</body>
</html>

Đường cong Bezier - bản chất của timing function

Mọi timing function đều là đường cong Bezier bậc 3 với 4 điểm điều khiển: P0(0,0), P1(x1,y1), P2(x2,y2), P3(1,1).

• Trục X: Tiến độ animation (0% → 100%)
• Trục Y: Tiến độ giá trị property (0% → 100%)
• Độ dốc = Tốc độ tại thời điểm đó

Các preset hữu ích

/* Nhanh đầu, chậm cuối - Material Design */
cubic-bezier(0.4, 0, 0.2, 1)

/* Chậm đầu, nhanh cuối */
cubic-bezier(0.4, 0, 1, 1)

/* Anticipation (lùi một chút rồi tiến) */
cubic-bezier(0.3, -0.2, 0.7, 1.2)

/* Steps - chia thành các bước rời rạc */
steps(4, end)  /* 4 bước, nhảy ở cuối mỗi bước */
steps(4, start) /* 4 bước, nhảy ở đầu mỗi bước */

Lưu ý quan trọng

• transition-timing-function áp dụng cho **mỗi property** trong transition.
• Có thể chỉ định khác nhau: transition: width 2s ease, height 2s linear, opacity 1s ease-out;
• Không ảnh hưởng đến animation-timing-function (đó là thuộc tính riêng cho @keyframes).