CSS আমাদের উপাদানের বৈশিষ্ট্যের রূপান্তরকে অ্যানিমেট করতে দেয়। আমরা আমাদের পছন্দসই শৈলী সংজ্ঞায়িত করতে অ্যানিমেশন সম্পত্তি ব্যবহার করি। আমরা অ্যানিমেশন কীওয়ার্ড ব্যবহার করে অ্যানিমেশন-নাম, অ্যানিমেশন-সময়কাল, অ্যানিমেশন-পুনরাবৃত্তি-গণনা ইত্যাদি বৈশিষ্ট্যগুলিকে একত্রিত করতে পারি।
সিনট্যাক্স
অ্যানিমেশন সম্পত্তির সিনট্যাক্স নিম্নরূপ -
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
মান
নিম্নোক্ত মান −
| মান | বিবরণ |
|---|---|
| অ্যানিমেশন-নাম | নির্বাচককে আবদ্ধ করার জন্য কীফ্রেমের নাম নির্দিষ্ট করার জন্য। |
| অ্যানিমেশন-সময়কাল | সম্পূর্ণ হওয়ার জন্য অ্যানিমেশনের সময়কাল (সেকেন্ড বা মিলিসেকেন্ডে) নির্দিষ্ট করতে। |
| অ্যানিমেশন-টাইমিং-ফাংশন | অ্যানিমেশন গতি বক্ররেখা নির্দিষ্ট করতে। |
| অ্যানিমেশন-বিলম্ব | অ্যানিমেশন শুরু হওয়ার আগে কিছু বিলম্ব নির্দিষ্ট করতে |
| অ্যানিমেশন-পুনরাবৃত্তি-গণনা | একটি অ্যানিমেশন চালানো উচিত সময়ের সংখ্যা নির্দিষ্ট করতে |
| অ্যানিমেশন-নির্দেশ | অ্যানিমেশনটি বিকল্প বা বিপরীত চক্রে চালানো উচিত কি না তা নির্দেশ করতে। |
| অ্যানিমেশন-ফিল-মোড | অ্যানিমেশনটি কার্যকর করার সময়ের বাইরে যে মানগুলি প্রয়োগ করা হয় তা নির্দিষ্ট করতে |
| অ্যানিমেশন-প্লে-স্টেট | অ্যানিমেশনটি বর্তমানে পজ বা প্লে করা হয়েছে কিনা তা নির্দিষ্ট করতে। |
| প্রাথমিক | এই প্রপার্টিটিকে প্রারম্ভিক মান সেট করার জন্য। |
| উত্তরাধিকার | অভিভাবক সম্পত্তি মান উত্তরাধিকারী হতে। |
উদাহরণ
−
অ্যানিমেশন বৈশিষ্ট্যের উদাহরণটি দেখা যাক<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 5px;
height: 15px;
background-color: limegreen;
animation: demo 4s infinite;
}
@keyframes demo {
from {width: 5px; background-color: limegreen;}
to {width: 400px; background-color: darkgreen;}
}
@keyframes demo1 {
from {height: 5px; background-color: limegreen;}
to {height: 400px; background-color: darkgreen;}
}
</style>
<script>
function changeAnimation() {
document.getElementById("DIV1").style.animation = "demo1 4s 2";
}
</script>
</head>
<body>
<button onclick="changeAnimation()">CHANGE ANIMATION</button>
<p>Change the below animation by clicking the above button</p>
<div id="DIV1"></div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
চেঞ্জ অ্যানিমেশন বোতামে ক্লিক করলে, অ্যানিমেশন বদলে যাবে -
