Thuộc tính animationName dùng để lấy hoặc đặt tên keyframe mà hoạt ảnh sẽ tham chiếu. Cho phép chuyển đổi giữa các keyframe khác nhau động.
Cú pháp
Để thiết lập animationName:
object.style.animationName = "none|keyframename|initial|inherit"
Các giá trị
| Giá trị | Mô tả |
|---|---|
| none | Không có hoạt ảnh (mặc định). |
| keyframename | Tên keyframe định nghĩa bằng @keyframes. |
| initial | Đặt về giá trị mặc định. |
| inherit | Kế thừa từ phần tử cha. |
Ví dụ
Ví dụ minh họa animationName:
<!DOCTYPE html> <html> <head> <style>
div {
width: 60px;
height: 40px;
border: 10px groove fuchsia;
position: relative;
animation-name: bravo;
animation-iteration-count: infinite;
animation-duration: 5s;
}
@keyframes bravo {
from { left: 0px; }
to { left: 600px; }
}
@keyframes NEW_FRAME {
from { left: 550px; }
to { left: 0px; }
}
</style>
<script>
function nameChange(){
document.getElementById("DIV1").style.animationName = "NEW_FRAME";
document.getElementById("Sample").innerHTML = "Tên hoạt ảnh hiện là NEW_FRAME";
}
</script> </head>
<body>
<div id="DIV1">VĂN BẢN MẪU</div>
<p>Nhấn nút để thay đổi keyframe tham chiếu</p>
<button onclick="nameChange()">THAY ĐỔI TÊN</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Hoạt ảnh ban đầu chạy từ trái sang phải (keyframe bravo):
Sau khi nhấn nút, chạy ngược từ phải sang trái (keyframe NEW_FRAME):
