Cách đặt độ trễ chuyển động (transitionDelay) bằng JavaScript

Thuộc tính transitionDelay xác định thời gian chờ trước khi hiệu ứng transition bắt đầu. Giá trị: <time> (s hoặc ms). Mặc định: 0s. Giá trị âm: bắt đầu ngay nhưng ở trạng thái giữa chừng (như đã chạy một phần).

Ví dụ minh họa

Mã sau đặt transitionDelay = 1s và timing-function = ease-in cho div2 khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #div1 {
      position: relative;
      margin: 10px;
      height: 300px;
      width: 400px;
      padding: 20px;
      border: 2px solid blue;
    }
    #div2 {
      padding: 80px;
      position: absolute;
      border: 2px solid blue;
      background-color: yellow;
      transform: rotateY(45deg);
      transition: all 5s;
    }
    #div2:hover {
      background-color: orange;
      width: 50px;
      height: 50px;
      padding: 100px;
      border-radius: 50px;
    }
  </style>
</head>
<body>
  <p>Di chuột qua DIV2</p>
  <button onclick="setTransitionDelay()">Đặt Transition Delay</button>
  <div id="div1">DIV1
    <div id="div2">DIV2</div>
  </div>
  <script>
    function setTransitionDelay() {
      const el = document.getElementById("div2");
      el.style.transitionTimingFunction = "ease-in";
      el.style.transitionDelay = "1s";
      /* Chờ 1 giây mới bắt đầu transition, rồi chạy ease-in trong 5s */
    }
  </script>
</body>
</html>

Cú pháp transitionDelay

• Một giá trị: transitionDelay = "1s" hoặc "500ms".
• Nhiều giá trị: transitionDelay = "0s, 1s, 2s" (áp dụng lần lượt cho các property trong transitionProperty).
• Giá trị âm: transitionDelay = "-1s" → bắt đầu ngay nhưng tại thời điểm 1s của animation.

Ứng dụng thực tế: Chuỗi animation (Staggered animation)

// HTML: 3 items
items.forEach((item, index) => {
  item.style.transitionDelay = `${index * 100}ms`;
  // Item 0: 0ms, Item 1: 100ms, Item 2: 200ms
});
// Khi trigger (thêm class), các item animate lần lượt

4 thuộc tính transition (tóm tắt)

Shorthand: transition: property duration timing delay.