Thuộc tính animationDelay trong HTML DOM Style

Thuộc tính animationDelay xác định thời điểm bắt đầu của chuỗi hoạt ảnh. Bạn có thể cho hoạt ảnh bắt đầu ngay lập tức, sau một khoảng thời gian, hoặc ngay giữa chu kỳ.

Cú pháp

Để thiết lập thuộc tính animationDelay:

object.style.animationDelay = "time|initial|inherit"

Các giá trị

Ví dụ

Ví dụ minh họa cho animationDelay:

<!DOCTYPE html> <html> <head> <style> 
  #box { 
    width: 50px; 
    height: 50px; 
    border-radius: 10%; 
    background: lightgreen; 
    position: relative; 
    animation: glide 5s; 
    animation-delay: 1s; 
    transition: 0.5s; 
  } 
  @keyframes glide { 
    from { left: 0px; } 
    to { left: 200px; background-color: lightblue; } 
  } 
</style> 
<script> 
  function delayChange(){ 
    document.getElementById("box").style.animationDelay = "5s"; 
    document.getElementById("Sample").innerHTML = "Hoạt ảnh sẽ bắt đầu sau 5 giây"; 
  } 
</script> </head> 
<body> 
<h1>Ví dụ animationDelay</h1> 
<div id="box"></div> 
<p>Nhấn nút để thay đổi độ trễ thành 5s</p> 
<button onclick="delayChange()">THAY ĐỔI TRỄ</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Sau 1 giây, hoạt ảnh bắt đầu chạy:

Sau khi nhấn nút, độ trễ tăng lên 5 giây: