คุณสมบัติ animationDirection ใช้เพื่อระบุทิศทางของแอนิเมชั่นที่อาจเดินหน้า ถอยหลัง หรือสลับกัน
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ animationDirection -
object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"
คุณค่า
ต่อไปนี้เป็นค่า -
| ค่า | คำอธิบาย |
|---|---|
| ปกติ | นี่คือค่าเริ่มต้นที่ระบุว่าภาพเคลื่อนไหวควรเล่นตามปกติ |
| ย้อนกลับ | เพื่อระบุว่าภาพเคลื่อนไหวควรเล่นแบบย้อนกลับ |
| ทางเลือก | สำหรับให้แอนิเมชั่นเล่นตามปกติในเวลาคี่และย้อนกลับในเวลาคู่ |
| สลับ-ถอยหลัง | นี่คือการย้อนกลับของตัวเลือกและเล่น e ภาพเคลื่อนไหวในทิศทางย้อนกลับทุก ๆ ครั้งคี่และในทิศทางปกติทุก ๆ ครั้งเท่ากัน |
| เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ animationDirection -
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 80px;
background: skyblue;
position: relative;
animation: high 5s infinite;
z-index:-1;
animation-direction:normal;
}
@keyframes high {
0% {left: 0px; top: 0px;}
25% {background-color: lightblue; left: 0px; top: 0px;}
50% {background-color: lightgreen; left: 550px; top: 80px;}
75% {background-color: lightblue; left: 0px; top: 80px;}
100% {left: 0px; top: 0px;}
}
</style>
<script>
function changeDir(){
document.getElementById("DIV1").style.animationDirection="alternate-reverse"
}
</script>
</head>
<body>
<h1>animationDirection property example</h1>
<div id="DIV1"></div>
<p>Change the animation direction of the div by clicking the below button</p>
<button onclick="changeDir()">CHANGE DIRECTION</button>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ภาพเคลื่อนไหวจะเคลื่อนไปทางขวาในแนวทแยง -
เมื่อคลิกเปลี่ยนทิศทาง อันดับแรกจะเลื่อนลงจากจุดเริ่มต้นแล้วเคลื่อนที่ย้อนกลับ -
