Thuộc tính animationTimingFunction xác định đường cong tốc độ của hoạt ảnh, quyết định cách hoạt ảnh tiến triển trong một chu kỳ (nhanh/chậm ở đầu, giữa, cuối).
Cú pháp
Để thiết lập animationTimingFunction:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|initial|inherit"
Các giá trị
| Giá trị | Mô tả |
|---|---|
| linear | Tốc độ đều đặn suốt chu kỳ. |
| ease | Khởi đầu chậm, giữa nhanh, kết thúc chậm (mặc định). |
| ease-in | Khởi đầu chậm. |
| ease-out | Kết thúc chậm. |
| ease-in-out | Chậm cả đầu và cuối. |
| cubic-bezier(n,n,n,n) | Tùy chỉnh đường cong Bezier bậc 3. |
| initial | Đặt về giá trị mặc định. |
| inherit | Kế thừa từ phần tử cha. |
Ví dụ
Ví dụ minh họa animationTimingFunction:
<!DOCTYPE html> <html> <head> <style>
#PARA1 {
border: 2px solid black;
position: relative;
animation: demo 5s infinite;
animation-timing-function: linear;
}
@keyframes demo {
from { background-color: lightcoral; color: black; }
to { background-color: indigo; color: white; }
}
</style>
<script>
function timingChange(){
document.getElementById("PARA1").style.animationTimingFunction = "ease";
document.getElementById("Sample").innerHTML = "Timing function đã đổi thành ease";
}
</script> </head>
<body>
<p id="PARA1">Nội dung mẫu để quan sát chuyển động</p>
<p>Nhấn nút để thay đổi timing function</p>
<button onclick="timingChange()">THAY ĐỔI TIMING</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Hoạt ảnh chạy linear (tốc độ đều):
Sau khi nhấn nút, chuyển sang ease (chậm đầu cuối):
