animation-delay

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Thuộc tính animation-delay CSS chỉ định lượng thời gian chờ từ khi áp dụng animation cho một phần tử trước khi bắt đầu thực hiện animation. Animation có thể bắt đầu muộn hơn, ngay lập tức từ đầu, hoặc ngay lập tức và ở giữa animation.

Thường thuận tiện hơn khi sử dụng thuộc tính viết tắt animation để đặt tất cả các thuộc tính animation cùng một lúc.

Try it

animation-delay: 250ms;

animation-delay: 2s;

animation-delay: -2s;

<section class="flex-column" id="default-example">
  <div>Animation <span id="play-status"></span></div>
  <div id="example-element">Select a delay to start!</div>
</section>

#example-element {
  background-color: #1766aa;
  color: white;
  margin: auto;
  margin-left: 0;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#play-status {
  font-weight: bold;
}

.animating {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

const el = document.getElementById("example-element");
const status = document.getElementById("play-status");

function update() {
  status.textContent = "delaying";
  el.className = "";
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      el.className = "animating";
    });
  });
}

el.addEventListener("animationstart", () => {
  status.textContent = "playing";
});

el.addEventListener("animationend", () => {
  status.textContent = "finished";
});

const observer = new MutationObserver(() => {
  update();
});

observer.observe(el, {
  attributes: true,
  attributeFilter: ["style"],
});

update();

Cú pháp

css

/* Animation đơn */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* Nhiều animation */
animation-delay: 2.1s, 480ms;

/* Giá trị toàn cục */
animation-delay: inherit;
animation-delay: initial;
animation-delay: revert;
animation-delay: revert-layer;
animation-delay: unset;

Giá trị

<time>

Độ lệch thời gian, từ thời điểm animation được áp dụng cho phần tử, tại đó animation sẽ bắt đầu. Giá trị này có thể được chỉ định bằng giây (s) hoặc mili giây (ms). Đơn vị là bắt buộc.

Giá trị dương cho biết animation sẽ bắt đầu sau khi đã trôi qua khoảng thời gian được chỉ định. Giá trị 0s, là giá trị mặc định, cho biết animation sẽ bắt đầu ngay khi được áp dụng.

Giá trị âm khiến animation bắt đầu ngay lập tức, nhưng ở giữa chu kỳ của nó. Ví dụ, nếu bạn chỉ định -1s làm thời gian trễ animation, animation sẽ bắt đầu ngay lập tức nhưng sẽ bắt đầu từ giây thứ 1 trong chuỗi animation. Nếu bạn chỉ định giá trị âm cho thời gian trễ animation, nhưng giá trị bắt đầu là ngầm định, giá trị bắt đầu được lấy từ thời điểm animation được áp dụng cho phần tử.

Note: Khi bạn chỉ định nhiều giá trị được phân tách bằng dấu phẩy trên thuộc tính animation-*, chúng được áp dụng cho các animation theo thứ tự xuất hiện của animation-name. Đối với các tình huống mà số lượng animation và giá trị thuộc tính animation-* không khớp, hãy xem Setting multiple animation property values.

Note: animation-delay không có hiệu lực đối với CSS scroll-driven animations.

Định nghĩa hình thức

Initial value	`0s`
Applies to	all elements, `::before` and `::after` pseudo-elements
Inherited	no
Computed value	as specified
Animation type	Not animatable

Cú pháp hình thức

animation-delay = 
  <time>#

Ví dụ

Đặt thời gian trễ animation

Animation này có thời gian trễ là 2 giây.

HTML

html

<div class="box"></div>

CSS

css

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-delay: 2s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}