সিএসএস ৩ অ্যানিমেশনস (CSS3 Animations)

সুদীপ্ত সাহা

ফ্লাস বা জাভাস্ক্রিপ্ট দ্বারা তৈরি ওয়েব পেজের অ্যানিমেশনগুলো সিএসএস3 অ্যানিমেশন দ্বারা বদল করা যায়।

ব্রাউজার সাপোর্ট

নিচের টেবিলে প্রদর্শিত নাম্বারগুলো নির্দেশ করছে কোন ব্রাউজারের কোন ভার্শনগুলো এই প্রপার্টিকে সম্পূর্ণভাবে সাপোর্ট করে।
-webkit-, -moz-, অথবা -o- যুক্ত ব্রাউজারের প্রিফিক্স ভার্সনগুলো নির্দেশ করছে যা প্রথম এই প্রপার্টি সাপোর্ট করছে।

Property
@keyframes	43.0 4.0 -webkit-	12.0	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-	12.0	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

সিএসএস3 @keyframes এর রুল

যেখানে অ্যানিমেশন তৈরি হয় সেখানে @keyframes এর রুল প্রবর্তিত হয়।

@keyframes এর ভেতরে কোন সিএসএস স্টাইলকে নির্দিষ্ট করে দিলে অ্যানিমেশনটি বর্তমান স্টাইল থেকে ধীরে ধীরে নতুন স্টাইলে পরিবর্তন হবে।

সিএসএস3 অ্যানিমেশন

যখন @keyframes রুলের ভেতরে কোন অ্যানিমেশন তৈরি হবে তখন আপনাকে অবশ্যই সিলেক্টর ঠিক করে দিতে হবে, তা না হলে অ্যানিমেশন কোন ইফেক্ট দেখাবে না।
অ্যানিমেশনের সিলেক্টর নির্দিষ্ট করে দেয়ার জন্য অন্তত দুইটি প্রপার্টি ব্যবহার করতে হয়ঃ
অ্যানিমেশনের নাম -webkit-animation: myfirst, এবং অ্যানিমেশনের ব্যাপ্তিকাল

উদাহরনঃ
কোন -webkit-animation এর মধ্যে "myfirst" নামের অ্যানিমেশন তৈরি করা। অ্যানিমেশনের ব্যাপ্তিকালঃ ৫ সেকেন্ড

div {
     -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
     animation: myfirst 5s;
 }

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
     from {background: red;}
     to {background: yellow;}
     }

/* Standard syntax */
@keyframes myfirst {
     from {background: red;}
     to {background: yellow;}
 }

ইঙ্গিতঃ যদি ব্যাপ্তিকাল নির্দিষ্ট করা না হয় তাহলে অ্যানিমেশন কোন ইফেক্ট দেখাবে না, কারন ডিফল্ট ভ্যালু ০ ধরে নেয়া হবে।

সিএসএস3 অ্যানিমেশন কি?

অ্যানিমেশন হল কোন ইলিমেন্টকে ধীরে ধীরে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করার পদ্ধতি। আপনার যত প্রপার্টি ইচ্ছা এবং যতবার ইচ্ছা আপনি তা পরিবর্তন করতে পারবেন। পরিবর্তন কখন হবে তা আপনি % আকারে নির্দিষ্ট করে দিতে পারবেন, এছাড়াও আপনি "from" এবং "to" কীওয়ার্ড ব্যবহার করতে পারবেন(যেটা ০% এবং ১০০% এর মধ্যবর্তী কিছুকে বুঝাবে)

উদাহরনঃ
২৫% এবং ৫০% এর মধ্যে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা এবং পুনরায় অ্যানিমেশন কমপ্লিট হওয়ার পর করা।

/* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background: green;}
 }

/* Standard syntax */
      @keyframes myfirst {
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background: green;}
 }

উদাহরনঃ
২৫%, ৫০% এবং ৭৫% এর মধ্যে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা এবং পুনরায় অ্যানিমেশন কমপ্লিট হওয়ার পর করা।

/* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
      0% {background: red; left:0px; top:0px;}
      25% {background: yellow; left:200px; top:0px;}
      50% {background: blue; left:200px; top:200px;}
      75% {background: green; left:0px; top:200px;}
      100% {background: red; left:0px; top:0px;}
 }

/* Standard syntax */
 @keyframes myfirst {
      0% {background: red; left:0px; top:0px;}
      25% {background: yellow; left:200px; top:0px;}
      50% {background: blue; left:200px; top:200px;}
      75% {background: green; left:0px; top:200px;}
      100% {background: red; left:0px; top:0px;}
 }

অ্যানিমেশনের আরও উদাহরন

নিচের অ্যানিমেশনটিতে অ্যানিমেশনের সাতটি প্রপার্টি ব্যবহার করা হয়েছেঃ

div {
 /* Chrome, Safari, Opera */
 -webkit-animation-name: myfirst;
 -webkit-animation-duration: 5s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-delay: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -webkit-animation-play-state: running;
 /* Standard syntax */
 animation-name: myfirst;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-play-state: running;
 }

উপরের উদাহরণের মতোই আরেকটি অ্যানিমেশন ইফেক্ট (animation-play-state প্রপার্টি বাদে)। এখানে কিছু শর্ট-কার্ট অ্যানিমেশন প্রপার্টি ব্যবহার করা হয়েছেঃ

div {
     -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
     animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
 }

সিএসএস3 অ্যানিমেশন প্রপার্টি

নিচের টেবিলে @keyframes রুল এবং সকল অ্যানিমেশন প্রপার্টি লিস্ট করা হয়েছেঃ