Thuộc tính animation-delay

Thuộc tính animation-delay thiết lập độ trễ trước khi bắt đầu hoạt ảnh.

Cú pháp

cssbộ chọn {
  animation-delay: thời gian tính bằng s hoặc ms;
}

Giá trị

Giá trị Mô tả
s Chỉ định thời gian tính bằng giây (ví dụ 3s).
ms Chỉ định thời gian tính bằng mili giây (ví dụ 3ms). Một giây là 1000 mili giây.

Giá trị mặc định: 0s.

Ví dụ

Trong ví dụ này, sẽ có độ trễ 3 giây trước khi hoạt ảnh bắt đầu:

html<div id="elem"></div>
css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-delay: 3s;
  animation-duration: 6s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Xem thêm

  • thuộc tính animation-name,
    thuộc tính này đặt tên cho hoạt ảnh
  • thuộc tính animation-duration,
    thuộc tính này đặt thời lượng của hoạt ảnh
  • thuộc tính animation-timing-function,
    thuộc tính này đặt tốc độ thực hiện của hoạt ảnh
  • thuộc tính animation-iteration-count,
    thuộc tính này đặt số lần lặp của hoạt ảnh
  • thuộc tính animation-direction,
    thuộc tính này đặt hướng của hoạt ảnh
  • thuộc tính animation-fill-mode,
    thuộc tính này đặt trạng thái của hoạt ảnh
  • thuộc tính animation-play-state,
    thuộc tính này cho phép tạm dừng hoạt ảnh
  • thuộc tính animation,
    thuộc tính viết tắt cho các hoạt ảnh
  • lệnh @keyframes,
    lệnh này xác định các khung hình chính của hoạt ảnh
  • chuyển tiếp mượt mà transition, chuyển tiếp này là một hoạt ảnh khi di chuột lên phần tử