HTML DOM Style animationDirection প্রপার্টি

animationDirection প্রপার্টি ব্যবহার করে অ্যানিমেশনের দিক নির্দিষ্ট করা হয় — যেটি ফরওয়ার্ড, ব্যাকওয়ার্ড বা অ্যালটারনেটিং হতে পারে।

সিনট্যাক্স

animationDirection প্রপার্টি সেট করার সিনট্যাক্স:

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

মানসমূহ

উদাহরণ

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>

আউটপুট

নিচের আউটপুট তৈরি হবে:

অ্যানিমেশন প্রগ্রেস করার সাথে সাথে ডায়াগোনালি ডানদিকে সরবে:

CHANGE DIRECTION-এ ক্লিক করলে এটি শুরু বিন্দু থেকে নিচে যাবে এবং তারপর রিভার্সে যাবে: