CSS cho phép chúng tôi tạo hiệu ứng chuyển đổi thuộc tính của các phần tử. Chúng tôi sử dụng thuộc tính hoạt ảnh để xác định phong cách mong muốn của chúng tôi. Chúng ta có thể kết hợp các thuộc tính như tên hoạt ảnh, thời lượng hoạt ảnh, số lần lặp hoạt ảnh, v.v. bằng cách sử dụng từ khóa hoạt ảnh.
Cú pháp
Cú pháp của thuộc tính hoạt ảnh như sau -
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
Giá trị
Sau đây là các giá trị -
| Giá trị | Mô tả |
|---|---|
| animation-name | Để chỉ định tên khung hình chính để liên kết bộ chọn. |
| thời lượng hoạt ảnh | Để xác định khoảng thời gian của hoạt ảnh (tính bằng giây hoặc mili giây) để hoàn thành. |
| animation-timing-function | Để chỉ định đường cong tốc độ hoạt ảnh. |
| animation-delay | Để chỉ định một số độ trễ trước khi hoạt ảnh bắt đầu |
| animation-iteration-count | Để chỉ định thời gian phát hoạt ảnh |
| hướng hoạt ảnh | Để cho biết hoạt ảnh nên hay không nên phát theo chu kỳ thay thế hoặc ngược lại. |
| animation-fill-mode | Để chỉ định các giá trị được áp dụng bởi hoạt ảnh bên ngoài thời gian nó đang thực thi |
| animation-play-state | Để chỉ định xem hoạt ảnh hiện đang bị tạm dừng hay đang phát. |
| tên ban đầu | Để đặt thuộc tính này thành giá trị ban đầu. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ. |
Ví dụ
Chúng ta hãy xem ví dụ về thuộc tính hoạt ảnh -
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 5px;
height: 15px;
background-color: limegreen;
animation: demo 4s infinite;
}
@keyframes demo {
from {width: 5px; background-color: limegreen;}
to {width: 400px; background-color: darkgreen;}
}
@keyframes demo1 {
from {height: 5px; background-color: limegreen;}
to {height: 400px; background-color: darkgreen;}
}
</style>
<script>
function changeAnimation() {
document.getElementById("DIV1").style.animation = "demo1 4s 2";
}
</script>
</head>
<body>
<button onclick="changeAnimation()">CHANGE ANIMATION</button>
<p>Change the below animation by clicking the above button</p>
<div id="DIV1"></div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI HÌNH ẢNH, hoạt ảnh sẽ thay đổi -
