Thuộc tính transitionTimingFunction của Style trong HTML DOM

Thuộc tính style.transitionTimingFunction trong HTML DOM quy định **hàm thời gian (easing function)** của hiệu ứng chuyển tiếp (transition) — tức là **tốc độ thay đổi** theo thời gian: nhanh trước chậm sau, đều đặn, nảy móng, v.v. Làm cho chuyển động tự nhiên, sống động hơn.

Cú pháp

// Lấy giá trị
var timing = element.style.transitionTimingFunction;

// Đặt giá trị
element.style.transitionTimingFunction = "ease-in-out";

Các giá trị phổ biến

Giá trị	Đặc điểm	Mô tả cảm giác
`ease` (mặc định)	Chậm đầu, nhanh giữa, chậm cuối	Tự nhiên, mềm mại
`linear`	Tốc độ không đổi	Cơ học, cứng nhắc
`ease-in`	Khởi động chậm, tăng dần	Khởi động từ từ
`ease-out`	Khởi động nhanh, giảm dần đến cuối	Dừng nhẹ nhàng
`ease-in-out`	Chậm đầu, nhanh giữa, chậm cuối (đối xứng hơn ease)	Cân bằng, chuyên nghiệp
`cubic-bezier(n,n,n,n)`	Tùy chỉnh đường cong Bezier bậc 3 (4 tham số 0-1)	Tùy ý: bounce, elastic, overshoot...
`step-start`, `step-end`	Nhảy ngay lập tức (không mượt)	Chuyển trạng thái tức thì

Ví dụ: Áp dụng ease-in-out cho hover

<!DOCTYPE html>
<html>
<style>
  body { color: #000; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem 0; }
  .circle {
    width: 100px; height: 100px; background: #db133a;
    margin: 2rem auto; transition: all 2s; /* 2 giây cho tất cả property */
  }
  .circle:hover {
    width: 200px; height: 200px; border-radius: 50%; /* Tròn khi hover */
  }
  .show { font-size: 1.2rem; margin: 1rem 0; text-align: center; }

<body>
  <h1>Demo: transitionTimingFunction</h1>
  <div class="circle" id="circle"></div>
  <button onclick="setTiming()" class="btn">Đặt ease-in-out</button>
  <div class="show">Di chuột vào hình tròn sau khi nhấn nút</div>
  <script>
    function setTiming() {
      document.getElementById('circle').style.transitionTimingFunction = "ease-in-out";
    }
  </script>
</body>
</html>

Kết quả:

Ban đầu: Hover → chuyển đổi với ease (mặc định).
Nhấn nút: Set ease-in-out.
Hover lại: Chuyển đổi **chậm ở đầu và cuối, nhanh ở giữa** — cảm giác mượt mà, cân đối.

Lưu ý

transitionTimingFunction chỉ có ý nghĩa khi có transition-property và transition-duration đã thiết lập (hoặc shorthand transition).
Có thể set cho từng property: transition-timing-function: width ease, height linear.
Công cụ tạo cubic-bezier: cubic-bezier.com.
Performance: linear nhẹ nhất, cubic-bezier phức tạp có thể gây jank trên thiết bị yếu.

Ví dụ cubic-bezier "bounce"

element.style.transitionTimingFunction = "cubic-bezier(0.68, -0.55, 0.27, 1.55)";

Tạo hiệu ứng "vượt quá đích rồi quay lại" (overshoot) — rất hay cho nút bấm, modal.