CSS ช่วยให้เราสามารถทำให้การเปลี่ยนคุณสมบัติขององค์ประกอบเคลื่อนไหวได้ เราใช้คุณสมบัติแอนิเมชั่นเพื่อกำหนดสไตล์ที่ต้องการ เราสามารถรวมคุณสมบัติต่างๆ เช่น ชื่อแอนิเมชั่น ระยะเวลาของแอนิเมชัน การนับซ้ำแอนิเมชัน เป็นต้น โดยใช้คีย์เวิร์ดของแอนิเมชัน
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติแอนิเมชั่นมีดังนี้ -
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
คุณค่า
ต่อไปนี้เป็นค่า -
| ค่า | คำอธิบาย |
|---|---|
| ชื่อแอนิเมชั่น | สำหรับการระบุชื่อคีย์เฟรมที่จะผูกตัวเลือก |
| ภาพเคลื่อนไหว-ระยะเวลา | เพื่อระบุระยะเวลาของภาพเคลื่อนไหว (เป็นวินาทีหรือมิลลิวินาที) ให้เสร็จสิ้น |
| ฟังก์ชันเวลาภาพเคลื่อนไหว | เพื่อระบุเส้นโค้งความเร็วของภาพเคลื่อนไหว |
| ภาพเคลื่อนไหว-ล่าช้า | ระบุการหน่วงเวลาก่อนที่ภาพเคลื่อนไหวจะเริ่มขึ้น |
| การนับภาพเคลื่อนไหวซ้ำ | หากต้องการกำหนดระยะเวลาในการเล่นแอนิเมชั่น |
| ทิศทางภาพเคลื่อนไหว | เพื่อระบุว่าภาพเคลื่อนไหวควรหรือไม่ควรเล่นในวงจรสลับกันหรือย้อนกลับ |
| โหมดเติมภาพเคลื่อนไหว | เพื่อระบุค่าที่แอนิเมชั่นนำไปใช้นอกเวลาที่ทำงาน |
| animation-play-state | เพื่อระบุว่ากำลังหยุดภาพเคลื่อนไหวชั่วคราวหรือกำลังเล่นอยู่ |
| เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติแอนิเมชั่น -
<!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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม CHANGE ANIMATION ภาพเคลื่อนไหวจะเปลี่ยน -
