animation-play-state

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-play-state trong CSS đặt trạng thái hoạt ảnh đang chạy hay đang tạm dừng.

Tiếp tục một hoạt ảnh đang tạm dừng sẽ bắt đầu lại từ vị trí nó đã dừng, thay vì bắt đầu lại từ đầu chuỗi hoạt ảnh.

Try it

animation-play-state: paused;

animation-play-state: running;

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></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%;
}

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

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

Cú pháp

css

/* Một hoạt ảnh */
animation-play-state: running;
animation-play-state: paused;

/* Nhiều hoạt ảnh */
animation-play-state: paused, running, running;

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

Giá trị

running: Hoạt ảnh đang chạy.
paused: Hoạt ảnh đang tạm dừng.

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

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

Initial value	`running`
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-play-state = 
  <single-animation-play-state>#  

<single-animation-play-state> = 
  running  |
  paused

Ví dụ

Tạm dừng hoạt ảnh

Hoạt ảnh này đang tạm dừng, nhưng chạy khi bạn di chuột qua nó.

HTML

html

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

CSS

css

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

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