animation প্রপার্টি
animation প্রপার্টি হল অ্যানিমেশনের জন্য একটি সংক্ষিপ্ত রূপ প্রপার্টি,
এটি একসাথে অ্যানিমেশনের সমস্ত প্রপার্টি সেট করতে দেয়: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state।
মানের ক্রম গুরুত্বপূর্ণ নয়, অ্যানিমেশনের সময়
animation-duration অবশ্যই বিলম্ব animation-delay এর আগে
স্থাপন করতে হবে। শুধুমাত্র animation-name এবং animation-duration
প্রপার্টিগুলি বাধ্যতামূলক।
প্রপার্টিটি none মানও নিতে পারে,
যা অ্যানিমেশন সম্পূর্ণরূপে বন্ধ করে দেয়। এই
মানটি ডিফল্ট মান।
সিনট্যাক্স
সিলেক্টর {
animation: মান;
}
উদাহরণ
এই উদাহরণে, অ্যানিমেশন শুরু হওয়ার前に 3 সেকেন্ড বিলম্ব হবে
(প্রতিটি নতুন প্লেব্যাকের前に), এবং তারপর অ্যানিমেশন
6 সেকেন্ড ধরে চলবে:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation: move 6s infinite 3s linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
উদাহরণ । সম্ভাব্য সমস্যা
সংক্ষিপ্ত আকারে লেখা একটি অ্যানিমেশন তার নামের কারণে কাজ নাও করতে পারে। আসুন নিম্নলিখিত অ্যানিমেশনটি বিবেচনা করি:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
লক্ষ্য করুন, আমি reverse নামটি ব্যবহার করছি অ্যানিমেশনের জন্য।
প্রথম নজরে, সব ঠিক আছে, কিন্তু অ্যানিমেশন
কাজ করে না, কারণ reverse হল animation-direction প্রপার্টির জন্য
একটি বৈধ কীওয়ার্ড।
সংক্ষিপ্ত আকারে অন্যান্য কীওয়ার্ড নাম হিসাবে ব্যবহার করলেও অ্যানিমেশন কাজ করবে না। কিন্তু "সম্পূর্ণ" ফর্ম ব্যবহার করলে সবকিছু ভালভাবে কাজ করে।
animation-direction এর কীওয়ার্ড-মানগুলি,
যা অ্যানিমেশন ভঙ্গ করে, তাদের মধ্যে রয়েছে টাইমিং ফাংশনের সাথে সম্পর্কিত কীওয়ার্ডগুলি,
এবং infinite, alternate,
running, paused ইত্যাদি।
আরও দেখুন
-
@keyframesকমান্ড,
যা অ্যানিমেশনের কীফ্রেম নির্ধারণ করে -
transitionমসৃণ ট্রানজিশন, যা এলিমেন্টে হোভার করার সময় অ্যানিমেশন উপস্থাপন করে
