অ্যানিমেশন ডিরেকশন প্রপার্টি অ্যানিমেশনের দিক নির্দেশ করতে ব্যবহৃত হয় যা সামনে, পিছনে বা বিকল্প হতে পারে।
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলঅ্যানিমেশন ডিরেকশন প্রপার্টি −
সেট করা হচ্ছেobject.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"
মান
নিম্নোক্ত মান −
| মান | বিবরণ |
|---|---|
| স্বাভাবিক | এটি ডিফল্ট মান যা নির্দেশ করে যে অ্যানিমেশন স্বাভাবিকভাবে চালানো উচিত। |
| বিপরীত৷ | অ্যানিমেশনটি বিপরীতে চালানো উচিত তা নির্দেশ করার জন্য। |
| বিকল্প | বিজোড় সময়ে অ্যানিমেশনটি স্বাভাবিকভাবে চালানোর জন্য এবং জোড় সময়ে বিপরীত দিকনির্দেশনা করার জন্য। |
| বিকল্প-বিপরীত | এটি বিকল্পের বিপরীত এবং প্রতি বিজোড় সময়ে বিপরীত দিকে এবং প্রতি জোড় সময়ে একটি স্বাভাবিক দিকে ই অ্যানিমেশন চালায়। |
| প্রাথমিক | এই প্রপার্টিটিকে প্রারম্ভিক মান সেট করার জন্য |
| nherit | এই সম্পত্তিটি এর মূল উপাদান থেকে উত্তরাধিকারসূত্রে পাওয়া যায়। |
উদাহরণ
আসুন আমরা অ্যানিমেশন ডিরেকশন প্রপার্টির উদাহরণ দেখি -
<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
অ্যানিমেশন অগ্রগতির সাথে সাথে, এটি তির্যকভাবে ডানদিকে চলে যাবে -
পরিবর্তনের দিকনির্দেশে ক্লিক করলে, এটি প্রথমে প্রারম্ভিক বিন্দু থেকে নিচে চলে যাবে এবং তারপর বিপরীত দিকে চলে যাবে -
