คุณสมบัติ HTML DOM Style animationDirection

คุณสมบัติ animationDirection ใช้ระบุทิศทางของอนิเมชัน ซึ่งอาจเป็นไปข้างหน้า ถอยหลัง หรือสลับกันไปมา

ไวยากรณ์ (Syntax)

object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"

ค่าที่ใช้ได้ (Values)

ตัวอย่าง (Example)

<!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>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

ตามที่อนิเมชันทำงาน จะเคลื่อนที่เฉียงไปทางขวา:

เมื่อคลิก CHANGE DIRECTION จะเคลื่อนที่ลงจากจุดเริ่มต้นก่อน แล้วจึงเคลื่อนที่ในทิศทางตรงข้าม: