AnimationTimingFunction được sử dụng để chỉ định cách hoạt ảnh tiến triển trong chu kỳ của nó. Nó làm như vậy bằng cách thiết lập hoặc trả về đường cong tốc độ cho hoạt ảnh. Đường cong tốc độ xác định mức độ mượt mà của quá trình chuyển đổi bằng cách chỉ định thời gian cần hoạt ảnh để chuyển từ trạng thái này sang trạng thái khác.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính animationTimingFunction -
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Giá trị
Sau đây là các giá trị -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | tuyến tính Điều này chỉ định rằng hoạt ảnh có cùng tốc độ trong suốt quá trình của hoạt ảnh. |
| 2 | dễ dàng Đây là giá trị mặc định chỉ định hoạt ảnh có bắt đầu và kết thúc chậm nhưng nhanh hơn ở giữa. |
| 3 | dễ dàng Hoạt ảnh bắt đầu chậm. |
| 4 | dễ dàng Hình ảnh động có một kết thúc chậm. |
| 5 | dễ ra Hoạt ảnh chậm khi bắt đầu và cũng chậm ở cuối. |
| 6 | khối-bezier (n, n, n, n) Fo xác định hàm khối-bezier cho các giá trị tùy chỉnh của bạn. |
| 7 | tên đầu tiên Để đặt thuộc tính này thành giá trị ban đầu. |
| 8 | kế thừa Để kế thừa giá trị tài sản mẹ. |
Ví dụ
Chúng ta hãy xem ví dụ về thuộc tính 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="The animation timing is now set to ease.";
}
</script>
</head>
<body>
<p id="PARA1">
Lacus vel facilisis volutpat est velit. Id interdum velit laoreet id donec ultrices.
Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Viverra nibh cras
pulvinar mattis nunc sed blandit libero.</p>
<p>Click the below button to change the above animation name</p>
<button onclick="timingChange()">CHANGE TIMING</button>
<p id="Sample"></p>
</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 THỜI GIAN -
