Thuộc tính animationDirection chỉ định hướng chạy của hoạt ảnh: tiến, lùi hoặc luân phiên. Mặc định là normal (chạy tiến).
Cú pháp
Để thiết lập thuộc tính animationDirection:
object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"
Các giá trị
| Giá trị | Mô tả |
|---|---|
| normal | Chạy hoạt ảnh theo hướng tiến (từ 0% đến 100%). Giá trị mặc định. |
| reverse | Chạy hoạt ảnh ngược (từ 100% về 0%). |
| alternate | Chạy tiến ở chu kỳ lẻ, chạy lùi ở chu kỳ chẵn. |
| alternate-reverse | Chạy lùi ở chu kỳ lẻ, chạy tiến ở chu kỳ chẵn (ngược với alternate). |
| initial | Đặt về giá trị mặc định. |
| inherit | Kế thừa từ phần tử cha. |
Ví dụ
Ví dụ minh họa cho animationDirection:
<!DOCTYPE html> <html> <head> <style>
div {
width: 50px;
height: 80px;
background: skyblue;
position: relative;
animation: high 5s infinite;
z-index: -1;
animation-direction: normal;
}
@keyframes high {
0% { left: 0px; top: 0px; }
25% { background-color: lightblue; left: 0px; top: 0px; }
50% { background-color: lightgreen; left: 550px; top: 80px; }
75% { background-color: lightblue; left: 0px; top: 80px; }
100% { left: 0px; top: 0px; }
}
</style>
<script>
function changeDir(){
document.getElementById("DIV1").style.animationDirection = "alternate-reverse";
}
</script> </head>
<body>
<h1>Ví dụ animationDirection</h1>
<div id="DIV1"></div>
<p>Nhấn nút để thay đổi hướng hoạt ảnh</p>
<button onclick="changeDir()">THAY ĐỔI HƯỚNG</button>
</body> </html>
Kết quả
Hoạt ảnh ban đầu di chuyển theo đường chéo xuống phải:
Sau khi nhấn nút, hoạt ảnh chạy alternate-reverse (đi xuống trước rồi lùi):
