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

คุณสมบัติ animationName ใช้สำหรับรับหรือตั้งค่าชื่ออนิเมชันเพื่ออ้างอิงกับ @keyframes

ไวยากรณ์ (Syntax)

object.style.animationName = "none|keyframename|initial|inherit"

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

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <head> <style> 
  div { 
    width: 60px; 
    height: 40px; 
    border: 10px groove fuchsia; 
    position: relative; 
    animation-name: bravo; 
    animation-iteration-count:infinite; 
    animation-duration: 5s; 
  } 
  @keyframes bravo { 
    from {left: 0px; } 
    to {left: 600px;} 
  } 
  @keyframes NEW_FRAME { 
    from {left:550px; } 
    to {left: 0px;} 
  } 
</style> 
<script> 
  function nameChange(){ 
    document.getElementById("DIV1").style.animationName="NEW_FRAME"; 
    document.getElementById("Sample").innerHTML="The animation name is now NEW_FRAME"; 
  } 
</script> </head> 
<body> 
<div id="DIV1">SAMPLE TEXT</div> 
<p>Click the below button to change the above animation fillmode property</p> 
<button onclick="nameChange()">CHANGE NAME</button> 
<p id="Sample"></p> 
</body> </html>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้ อนิเมชันเคลื่อนที่จากซ้ายไปขวา:

เมื่อคลิกปุ่ม CHANGE NAME อนิเมชันเคลื่อนที่จากขวาไปซ้าย: