animation-direction প্রপার্টি

animation-direction প্রপার্টিটি অ্যানিমেশনের দিক নির্দিষ্ট করে। ডিফল্টভাবে অ্যানিমেশন শুধুমাত্র 1 বার পুনরাবৃত্তি হয় এবং তারপর প্রারম্ভিক অবস্থায় ফিরে যায়, তারপর, যদি animation-delay নির্দিষ্ট করা থাকে, নির্দিষ্ট সময় অপেক্ষা করে এবং তারপর চক্রটি আবার শুরু হয়।

এই প্রপার্টিটি এই আচরণ পরিবর্তন করতে দেয়, উদাহরণস্বরূপ, এমন যে অ্যানিমেশন শেষ হওয়ার পরে যেখানে শেষ হয়েছে সেখানেই থাকে, এবং প্রারম্ভিক অবস্থানে ফিরে যায় না।

এছাড়াও এইরকম আচরণ নির্দিষ্ট করা যেতে পারে: অ্যানিমেশন চরম বিন্দুতে পৌঁছাবে এবং পিছনে ফিরে আসবে (transition-এর মতো)। নীচের বর্ণনা দেখুন।

সিনট্যাক্স

cssসিলেক্টর {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

মানসমূহ

ডিফল্ট মান: normal।

উদাহরণ

এখন উপাদানটি এক দিকে যাবে, এবং তারপর পিছনে ফিরে আসবে, কারণ alternate মান নির্দিষ্ট করা হয়েছে। এখানে animation-duration এর মান 3 সেকেন্ড এবং এর অর্থ হল "সেদিকে" এবং "পিছনে" চলাচল 3 সেকেন্ড করে স্থায়ী হবে:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ

এখন উপাদানটি বিপরীত দিকে চলবে (বাম থেকে ডানে যাওয়ার পরিবর্তে ডান থেকে বামে যাবে):

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}
      
#elem {
  animation-direction: reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ

এখন উপাদানটি সামনে-পিছনে চলবে, কিন্তু বিপরীত দিকে (বাম থেকে শুরু হওয়ার পরিবর্তে ডান থেকে শুরু হবে):

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate-reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

আরও দেখুন