সিএসএস৩ অ্যানিমেসন - Css3 Animations


জাভাস্ক্রিপ্ট অথবা ফ্ল্যাশ ব্যবহার না করেই বেশির ভাগ এইচটিএমএল এলিমেন্ট গুলো কে সিএসএস 3.0 এর এনিমেশন দ্বারা animat অর্থাৎ প্রাণবন্ত করে তোলা যায়। নিচে সিএসএস অ্যানিমেশন এর একটি ব্যাবহারিক উদাহরন দেখুন।







ওয়েব অ্যানিমেশন কি?

সাধারণত ওয়েব অ্যানিমেশন হল, ওয়েব পেজে কোন এইচটিএমএল এলিমেন্ট গুলো বিভিন্ন অবস্থানে বিভিন্ন স্টাইল পরিবর্তন করা। এইচটিএমএল এলিমেন্ট গুলোর বিভিন্ন সিএসএস প্রোপার্টি পরিবর্তনের দ্বারা কোন অ্যানিমেশন তৈরি করা হয়ে থাকে।

অর্থাৎ এইচটিএমএল এলিমেন্ট গুলোই বিভিন্ন অবস্থায় স্টাইল পরিবর্তন করে। যতবার খুশি ততবার এই প্রোপার্টি গুলো পরিবর্তন করা যায় এনিমেশন দ্বারা।


অ্যানিমেশন প্রোপার্টি

সিএসএস এর 3.0 সংস্করণ বা version এ যে সকল অ্যানিমেশন প্রোপার্টি যুক্ত করা হয়েছে, সেগুলো হল নিম্নরূপ।


@keyframes

সিএসএস এর @keyframes রুলটির অভ্যন্তরে সিএসএস প্রোপার্টি গুলো অর্থাৎ স্টাইল কোড গুলো নির্ধারণ করে দেয়া হয়। এই স্টাইল গুলোই আসলে এলিমেন্টে এনিমেশন তৈরি করে। @keyframes রুলটি দ্বারা তৈরি এনিমেশনকে কাযে লাগাতে হলে অবশ্যই এটিকে animation প্রোপার্টি গুলো দ্বারা যে কোনো এলিমেন্টের সাথে যুক্ত বা bind করতে হবে।

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে এনিমেশনকে একটি এইচটিএমএল div এলিমেন্টের সাথে যুক্ত বা bind করা হয়েছে। এই এনিমেশনটি 4 সেকেন্ডের যেখানে div এলিমেন্টির পৃষ্ঠদেশ বা background এর রঙ নীল থেকে ধীরে ধীরে লাল রঙে পরিবর্তিত হতে দেখা যাবে।

উদাহরণ

/* The animation code */
@keyframes example {
  from {background-color: blue;}
  to {background-color: red;}
  }

/* The element to apply the animation to */
div {
  width: 150px;
  height: 150px;
  background-color: blue;
  animation-name: example;
  animation-duration: 4s;
  }

কোড এডিটর


নোট - animation-duration প্রোপার্টি ব্যবহার করা না হয়, তবে এনিমেশনটি কাজ করবে না। কারণ এই প্রোপার্টির পূর্ব-নির্ধারিত বা default মান হল 0s অর্থাৎ 0 seceound.

উপরের উদাহরণে @keyframes এর মধ্যে "from" এবং "to" এই কীওয়ার্ড দুইটি দ্বারা এনিমেশনটি তৈরি করা হয়েছে। এছাড়াও শতকরা বা percentag অর্থাৎ " % " মান ব্যাবহার করেও এনিমেশনের মান নির্ধারণ করা যায়। এক্ষেত্রে এনিমেশনটি 0% থেকে শুরু হবে এবং 100% এ সম্পূর্ণ হবে। শতকরা বা percentag অর্থাৎ " % " মান ব্যবহার করে অনেক জটিল এবং কঠিন এনিমেশন খুব সহজে তৈরি করা যায়।

নিচে উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে div এলিমেন্টি এনিমেশন চলাকালীন অবস্থায় 4 বার পৃষ্ঠদেশ বা background এর রঙ পরিবর্তন করে।

উদাহরণ

/* The animation code */
@keyframes example {
  0% {background-color: teal;}
  25% {background-color: blue;}
  50% {background-color: violate;}
  100% {background-color: red;}
  }

/* The element to apply the animation to */
div {
  width: 150px;
  height: 150px;
  background-color: teal;
  animation-duration: 3s;
  animation-name: example;
  }

কোড এডিটর


নিচে কিছু সিএসএস স্টাইল কোডের উদাহরণ দেখুন, যেখানে এইচটিএমএল div এলিমেন্টটি এনিমেশনের সময় শতকরা বা percentag অর্থাৎ " % " মান অনুযাই পৃষ্ঠদেশ বা background এর রঙ এবং অবস্থান উভয়ই পরিবর্তন করবে।

উদাহরণ

/* The animation code */
@keyframes example {
  0% {background-color:orange; left:0px; top:0px;}
  25% {background-color:yellow; left:200px; top:0px;}
  50% {background-color:red; left:200px; top:200px;}
  75% {background-color:lime; left:0px; top:200px;}
  100% {background-color:orange; left:0px; top:0px;}
  }

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: orange;
  animation-name: example;
  animation-duration: 3s;
  }

কোড এডিটর



animation-delay প্রোপার্টি

সিএসএস এর animation-delay প্রোপার্টি ব্যবহার করে এনিমেশনটি কত সময়-কাল পর শুরু হবে টা নির্ধারণ করা যায়।

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে এনিমেশনটি 1 সেকেন্ড পরে অর্থাৎ বিলম্ব বা delay করে শুরু হবে।

উদাহরণ

div {
   width: 150px;
   height: 150px;
   position: relative;
   background-color: red;
   animation-duration: 4s;
   animation-delay: 1s;
   animation-name: example;
   }

কোড এডিটর


animation-delay প্রোপার্টির মান ঋণাত্মক বা negetive অর্থাৎ " - " হতে পারে। যদি ঋণাত্মক বা negetive মান নির্দিষ্ট করা হয় তবে অ্যানিমেশনটি এমন ভাবে শুরু হবে যেন ইতিমধ্যে নির্ধারিত সময় অর্থাৎ সেকেন্ড পার হয়ে গিয়েছে।

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, এখানে এনিমেশনটি এমন ভাবে শুরু হবে যেন ইতিমধ্যে 1 সেকেন্ড সময় পার হয়ে গেছে।

উদাহরণ

div {
   width: 150px;
   height: 150px;
   position: relative;
   background-color: red;
   animation-duration: 4s;
   animation-delay: -1s;
   animation-name: example;
   }

কোড এডিটর



animation-iteration-count প্রোপার্টি

সিএসএস এর animation-iteration-count প্রোপার্টি ব্যাবহার করে, অ্যানিমেশনটি কত বার চলবে অর্থাৎ পুনরাবৃত্তি করবে, তা নির্ধারণ করা যায়।

নিচে animation-iteration-count প্রোপার্টি ব্যাবহার করে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে অ্যানিমেশনটি 4 বার পুনরাবৃত্তি করবে অর্থাৎ 4 বার চলবে।

উদাহরণ

div { width: 150px;
   height: 150px;
   position: relative;
   background-color: red;
   animation-name: example;
   animation-duration: 4s;
   animation-iteration-count: 4;
   }

কোড এডিটর


animation-iteration-count প্রোপার্টির মান বা value "infinite" নির্ধারণ করা হলে এনিমেশনটি সব সময় অর্থাৎ অনবরত চলতে থাকে।

নিচের উদাহরনে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে "infinite" মান ব্যাবহার করার ফলে এনিমেশনটি সব সময় অর্থাৎ অনবরত চলতে থাকে।

উদাহরণ

div {
   width: 150px;
   height: 150px;
   position: relative;
   background-color: red;
   animation-name: example;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   }

কোড এডিটর



বিপরীত দিকে এনিমেশন

সিএসএস animation-direction প্রোপার্টি ব্যবহার করে কোন অ্যানিমেশন এর দিক অর্থাৎ অ্যানিমেশনটি বিপরীত দিক হতে শুরু করা যায়। animation-direction প্রোপার্টির জন্য যেসকল মান বা value নির্ধারণ করা যেতে পারে সেগুল হল নিম্নরুপ।

নিচের উদাহরণে animation-direction প্রপার্টির মান reverse নির্ধারণ করা হয়েছে, এর ফলে অ্যানিমেসনটি বিপরীত দিক হতে শুরু হয়েছে।

উদাহরণ

div {
   width: 150px;
   height: 150px;
   position: relative;
   background-color: red;
   animation-name: example;
   animation-duration: 3s;
   animation-direction: reverse;
   }

কোড এডিটর


নিচের উদাহরণে সিএসএস স্টাইল কোড গুলো দেখুন, যেখানে animation-direction প্রপার্টির মান alternate নির্ধারণ করা হয়েছে, এর ফলে অ্যানিমেসনটি প্রথমে সম্মুখ দিক থেকে এবং পরে বিপরীত দিক থেকে শুরু হয়েছে।

উদাহরণ

div{
width: 150px;
height: 150px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 3s;
animation-iteration-count: 3;
animation-direction: alternate;
}

কোড এডিটর


নিচের উদাহরণে সিএসএস স্টাইল কোড গুলো দেখুন, যেখানে animation-direction প্রপার্টির মান alternate-reverse নির্ধারণ করা হয়েছে, এর ফলে অ্যানিমেসনটি প্রথমে বিপরীত দিক থেকে এবং পরে সম্মুখ দিক থেকে শুরু হয়েছে।

উদাহরণ

div {
   width: 150px;
   height: 150px;
   position: relative;
   background-color: red;
   animation-name: example;
   animation-duration: 3s;
   animation-iteration-count: 3;
   animation-direction: alternate-reverse;
   }

কোড এডিটর



animation-timing-function প্রোপার্টি

সিএসএস এর nimation-timing-function প্রোপার্টি ব্যাবহার করে অ্যানিমেশন এর গতির ধারা নিয়ন্ত্রন করা যায়।

nimation-timing-function প্রোপার্টির জন্য যেসকল মান বা value ব্যবহার করা যায় সেগুলো নিম্নরূপ।

nimation-timing-function প্রোপার্টি ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোডের উদাহারন দেখুন।

উদাহরণ

#linear {animation-timing-function: linear;}
#ease {animation-timing-function: ease;}
#ease-in {animation-timing-function: ease-in;}
#ease-out {animation-timing-function: ease-out;}
#ease-in-out {animation-timing-function: ease-in-out;}

কোড এডিটর



animation শর্টহ্যান্ড প্রোপার্টি

নিচে একটি উদাহরন দেখুন, যেখানে animation এর সকল প্রোপার্টি অর্থাৎ animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count এবং animation-direction প্রোপার্টি ব্যাবহার করা হয়েছে।

উদাহরণ

div {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  }

কোড এডিটর


সব অ্যানিমেশন প্রোপার্টি গুলোর মান বা value কেবল animation প্রোপার্টি ব্যাবহার করে নির্ধারণ করা যায়। অর্থাৎ animation প্রোপার্টি হল সকল animation প্রোপার্টি গুলোর শর্টহ্যান্ড প্রোপার্টি।

নিচের উদাহরণে animation শর্টহ্যান্ড প্রোপার্টি ব্যাবহার করে একটি উদাহরন দেখুন।

উদাহরণ

div {
  animation: example 4s linear 2s infinite alternate;
  }

কোড এডিটর



ব্রাউজার সমর্থন

নিচের টেবিলে দেয়া রো গুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন বা support করে। এছাড়াও এর পরের লাইন -webkit-, -moz- বা -o- যুক্ত সংস্করণ বা version গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম সংস্করণ যেগুলো কোন প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

সকল অ্যানিমেশন প্রোপার্টি

প্রোপার্টিবর্ণনা
@keyframes
animation
animation-direction
animation-delay
animation-duration
animation-fill-mode
animation-name
animation-iteration-count
animation-play-state
animation-timing-function