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

CSS আমাদের এলিমেন্টের প্রপার্টি ট্রানজিশন অ্যানিমেট করতে দেয়। আমরা animation প্রপার্টি ব্যবহার করে আমাদের পছন্দের শৈলী সংজ্ঞায়িত করি। animation কীওয়ার্ড ব্যবহার করে animation-name, animation-duration, animation-iteration-count ইত্যাদি প্রপার্টিগুলো একসাথে কম্বাইন করা যায়।

সিনট্যাক্স

animation প্রপার্টির সিনট্যাক্স নিচে দেওয়া হল:

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

মানসমূহ

মান	বিবরণ
animation-name	সিলেক্টরকে বাইন্ড করার জন্য কীফ্রেমের নাম নির্দিষ্ট করতে ব্যবহৃত হয়।
animation-duration	অ্যানিমেশন সম্পন্ন হতে সময় (সেকেন্ড বা মিলিসেকেন্ডে) নির্দিষ্ট করতে ব্যবহৃত হয়।
animation-timing-function	অ্যানিমেশনের গতির কার্ভ নির্দিষ্ট করতে ব্যবহৃত হয়।
animation-delay	অ্যানিমেশন শুরু হওয়ার আগে কিছু ডিলে নির্দিষ্ট করতে ব্যবহৃত হয়।
animation-iteration-count	অ্যানিমেশন কতবার প্লে হবে তা নির্দিষ্ট করতে ব্যবহৃত হয়।
animation-direction	অ্যানিমেশন অ্যালটারনেট বা রিভার্স সাইকেলে প্লে হবে কিনা তা নির্দেশ করতে ব্যবহৃত হয়।
*animation-fill-mode*	অ্যানিমেশন এক্সিকিউট হওয়ার সময়ের বাইরে কোন মানগুলো প্রয়োগ হবে তা নির্দিষ্ট করতে ব্যবহৃত হয়।
*animation-play-state*	অ্যানিমেশন বর্তমানে পজ করা আছে কিনা বা চলছে তা নির্দিষ্ট করতে ব্যবহৃত হয়।
initial	প্রপার্টিটিকে প্রাথমিক মান হিসেবে সেট করে।
inherit	প্যারেন্ট এলিমেন্ট থেকে প্রপার্টির মান উত্তরাধিকার হিসেবে গ্রহণ করে।

উদাহরণ

animation প্রপার্টির উদাহরণ:

<!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>

আউটপুট

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

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

CHANGE ANIMATION বাটনে ক্লিক করলে অ্যানিমেশন পরিবর্তিত হবে:

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