animation-direction
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-direction CSS đặt xem animation có nên phát tiến, phát lùi, hay luân phiên giữa phát tiến và phát lùi.
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-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
<section class="flex-column" id="default-example">
<div id="example-element"></div>
<button id="play-pause">Play</button>
</section>
#example-element {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: slide;
animation-play-state: paused;
animation-timing-function: ease-in;
background-color: #1766aa;
border-radius: 50%;
border: 5px solid #333333;
color: white;
height: 150px;
margin: auto;
margin-left: 0;
width: 150px;
}
#example-element.running {
animation-play-state: running;
}
#play-pause {
font-size: 2rem;
}
@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 button = document.getElementById("play-pause");
button.addEventListener("click", () => {
if (el.classList.contains("running")) {
el.classList.remove("running");
button.textContent = "Play";
} else {
el.classList.add("running");
button.textContent = "Pause";
}
});
Cú pháp
/* Animation đơn */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Nhiều animation */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Giá trị toàn cục */
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: revert-layer;
animation-direction: unset;
Giá trị
normal-
Animation phát tiến mỗi chu kỳ. Nói cách khác, mỗi lần animation lặp lại, animation sẽ reset về trạng thái ban đầu và bắt đầu lại. Đây là giá trị mặc định.
reverse-
Animation phát lùi mỗi chu kỳ. Nói cách khác, mỗi lần animation lặp lại, animation sẽ reset về trạng thái kết thúc và bắt đầu lại. Các bước animation được thực hiện ngược lại, và các hàm easing cũng bị đảo ngược. Ví dụ, hàm easing
ease-intrở thànhease-out. alternate-
Animation đảo ngược hướng mỗi chu kỳ, với lần lặp đầu tiên được phát tiến. Số đếm để xác định xem một chu kỳ là chẵn hay lẻ bắt đầu từ một.
alternate-reverse-
Animation đảo ngược hướng mỗi chu kỳ, với lần lặp đầu tiên được phát lùi. Số đếm để xác định xem một chu kỳ là chẵn hay lẻ bắt đầu từ mộ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:
Khi tạo CSS scroll-driven animations, việc chỉ định animation-direction hoạt động như mong đợi, ví dụ reverse khiến animation chạy ngược lại trong quá trình tiến triển của timeline. Giá trị alternate (kết hợp với animation-iteration-count) khiến animation chạy tiến và lùi khi timeline được tiến triển.
Định nghĩa hình thức
| Initial value | normal |
|---|---|
| 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-direction =
<single-animation-direction>#
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
Ví dụ
Đảo ngược hướng animation
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
animation-direction: reverse;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Kết quả
Xem CSS animations để biết thêm ví dụ.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Animations Level 1 # animation-direction |
Tương thích trình duyệt
Xem thêm
- Using CSS animations
- JavaScript
AnimationEventAPI - Các thuộc tính animation liên quan khác:
animation,animation-composition,animation-delay,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timeline,animation-timing-function