Thiết lập các đường cong tốc độ khác nhau với transition-timing-function

Thuộc tính transition-timing-function

transition-timing-function xác định **đường cong tốc độ** (speed curve) của hiệu ứng transition. Mỗi giá trị tạo cảm giác chuyển động khác nhau.

Các giá trị chuẩn

Giá trị	Đặc điểm	Phù hợp cho
`ease`	Chậm - nhanh - chậm (mặc định)	Hầu hết UI transitions
`linear`	Tốc độ đều	Spinner, progress bar
`ease-in`	Khởi động chậm	Slide-in, modal show
`ease-out`	Kết thúc chậm	Modal hide, tooltip
`ease-in-out`	Chậm cả đầu và cuối	Carousel, tab switch
`cubic-bezier(n,n,n,n)`	Tùy chỉnh Bezier curve	Brand-specific motion
`step-start`	Nhảy ngay lập tức	Chuyển trạng thái đột ngột
`step-end`	Nhảy ở cuối	Animation frame-by-frame

Ví dụ so sánh 3 loại

<!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; }
    #effect3 { transition-timing-function: ease-out; }
    div:hover { width: 250px; }
  </style>
</head>
<body>
  <h1>Transition Timing Function Comparison</h1>
  <p>Hover vào các hộp để so sánh tốc độ:</p>
  <div id="effect1">linear</div><br>
  <div id="effect2">ease-in</div><br>
  <div id="effect3">ease-out</div><br>
</body>
</html>

Tùy chỉnh với cubic-bezier()

Công cụ trực quan: cubic-bezier.com. Một số preset phổ biến:

/* Material Design standard easing */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* iOS spring feel */
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);

/* Bounce effect (cần keyframes cho bounce thật) */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);