animationTimingFunction ใช้เพื่อระบุวิธีที่แอนิเมชั่นดำเนินไปในระหว่างรอบ ทำได้โดยการตั้งค่าหรือคืนค่าเส้นโค้งความเร็วสำหรับแอนิเมชัน เส้นโค้งความเร็วกำหนดว่าการเปลี่ยนภาพจะราบรื่นเพียงใดโดยการระบุเวลาที่ต้องใช้ภาพเคลื่อนไหวเพื่อย้ายจากสถานะหนึ่งไปยังอีกสถานะหนึ่ง
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ animationTimingFunction -
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
คุณค่า
ต่อไปนี้เป็นค่า -
| Sr.No | ค่า &คำอธิบาย |
|---|---|
| 1 | เชิงเส้น สิ่งนี้ระบุว่าแอนิเมชั่นมีความเร็วเท่ากันตลอดเส้นทางของแอนิเมชั่น |
| 2 | ง่าย นี่เป็นค่าเริ่มต้นที่ระบุว่าแอนิเมชั่นมีการเริ่มและสิ้นสุดช้า แต่อยู่ตรงกลางเร็วกว่า |
| 3 | ง่ายต่อการใช้งาน แอนิเมชั่นเริ่มช้า |
| 4 | ผ่อนสบาย แอนิเมชั่นมีตอนจบที่ช้า |
| 5 | เข้า-ออกง่าย แอนิเมชั่นจะช้าในตอนเริ่มต้นและช้าในตอนท้าย |
| 6 | cubic-bezier(n, n, n,n) สำหรับการกำหนดฟังก์ชันคิวบิกเบซิเยร์สำหรับค่าที่คุณกำหนดเอง |
| 7 | เริ่มต้น สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| 8 | สืบทอด เพื่อสืบทอดค่าคุณสมบัติหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ 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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มเปลี่ยนเวลา -
