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



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


সিএসএস ৩ এর এনিমেশন কি?

সাধারণত এনিমেশন বলতে কোন এলিমেন্টকে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করাকেই বোঝায়। ইচ্ছে মত প্রোপার্টিকে যতবার খুশি ততবার পরিবর্তন করা যায় এনিমেশন দ্বারা।
সিএসএস ৩ এর এনিমেশন ব্যবহার করতে হলে এনিমেশনের জন্য প্রথমে কিছু প্রোপার্টি নির্দিষ্ট করে দিতে হয়। এই প্রোপার্টি গুলো keyframes এর মধ্যে রাখতে হয়, যা পরবর্তিতে এনিমেশন ঘটার সময় এইচটিএমএল এলিমেন্ট গুলোর স্টাইল পরিবর্তন করে।


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

প্রপার্টি বর্ণনা
@keyframesএনিমেশনের জন্য সিএসএস প্রোপার্টি গুলো নির্ধারণ করে।
animationএনিমেশনের সকল প্রোপার্টিগুলো সেট করার একটি সংক্ষিপ্ত প্রোপার্টি।
animation-delayএনিমেশন শুরু হওয়ার বিলম্ব সময় নির্ধারণ করে।
animation-directionএনিমেশনের দিকে নির্ধারণ করে।
animation-durationএনিমেশন সম্পূর্ণ হওয়ার সময়-কাল নির্ধারণ করে।
animation-fill-modeযখন এনিমেশনটি বন্ধ আছে অর্থাৎ এনিমেশনটি শেষ বা শুরু হতে দেরি হচ্ছে তখন এলিমেন্টের জন্য স্টাইল নির্ধারণ করে।
animation-iteration-countএনিমেশনটি কতবার চলবে তা নির্ধারণ করে।
animation-nameএনিমেশনের একটি নাম নির্ধারণ করে যা এলিমেশনের সাথে @keyframes প্রোপার্টির লিংক করে।
animation-play-stateএনিমেশনটি চলমান নাকি বন্ধ থাকবে তা নির্ধারণ করে।
animation-timing-functionএনিমেশনে গতিবিধি নির্ধারণ করে।


@keyframes

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

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

উদাহরণ

/* 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: 3s;
}



নোট - যদি animation-duration প্রোপার্টি ব্যবহার করা না হয় তবে এনিমেশনটির কোন প্রভাব থাকবেনা। কারণ এটির ডিফল্ট মান 0 থাকে।

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

নিচের উদাহরণে div এলিমেন্টি এনিমেশন চলাকালীন অবস্থায় 4টি বার ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করবে।

উদাহরণ

/* 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 এলিমেন্টি এনিমেশনের সময় শতকরা(%) মান অনুযাই ব্যাকগ্রাউন্ডের রঙ এবং অবস্থান উভয়ই পরিবর্তন করবে।

উদাহরণ

/* 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;
}




বিলম্ব বা Delay এনিমেশন

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

উদাহরণ

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



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

উদাহরণ

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




এনিমেশন পুনরাবৃত্তি করা

animation-iteration-count প্রোপার্টি ব্যবহার করে কোন এনিমেশন কতবার চলবে তা নির্দেশ করা যায়। নিচের উদাহরণে এনিমেশনটি 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" নির্ধারণ করা হয়েছে।

উদাহরণ

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 নির্ধারণ করা যেতে পারে সেগুল হল নিম্নরুপ -

normal - এই মানের জন্য অ্যানিমেসন সাধারণ ভাবেই অর্থাৎ সম্মুখ দিক থেকে শুরু হবে, এটি হল ডিফল্ট মান।
reverse - এই মানের জন্য অ্যানিমেসন বিপরীত দিক থেকে শুরু হবে।
alternate - এই মানের জন্য অ্যানিমেসন প্রথমে সম্মুখ দিক থেকে এবং পরে বিপরীত দিক থেকে শুরু হবে।
alternate-reverse - এই মানের জন্য অ্যানিমেসন প্রথমে বিপরীত দিক থেকে শুরু হবেএবং পরে সম্মুখ দিক থেকে শুরু হবে।

নিচের উদাহরণে 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 প্রোপার্টি ব্যবহার করা যায়। animation-timing-function প্রোপার্টির জন্য যেসকল মান বা value ব্যবহার করা যায় সেগুলো হল -

ease - এর ফলে এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলবে এবং আবার ধীরে ধীরে শেষ হবে। এটি হল ডিফল্ট মান।
linear - এই মানের জন্য এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।
ease-in - এর জন্য এনিমেশনটি ধীর গতিতে শুরু হবে।
ease-out - এই মানের জন্য এনিমেশনটি ধীর গতিতে শেষ হবে।
ease-in-out - এই মানের জন্য এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।
cubic-bezier(n,n,n,n) - এই ফাংশনের মাধ্যমে আপনার ইচ্ছেমত ভ্যালু নির্দিষ্ট করে দিতে পারেন।

নিচের উদাহরণ দেখুন, যেখানে এনিমেশনের ভিন্ন ভিন্ন গতিবিধি দেখানো হয়েছে।

উদাহরণ

#div1{animation-timing-function: linear;}
#div2{animation-timing-function: ease;}
#div3{animation-timing-function: ease-in;}
#div4{animation-timing-function: ease-out;}
#div5{animation-timing-function: ease-in-out;}




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

নিচে একটি উদাহরণ দেখুন, যেখানে অ্যানিমেসন এর ৬ টি প্রপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

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



ওপরের একই উদাহরণটিকে animation প্রোপার্টি ব্যবহার করে দেখুন, কোডগুলো এখানে আগের উদাহরণ এর মতই কাজ করবে। এটি হল অ্যানিমেসন এর শর্টহ্যান্ড প্রপার্টি।

উদাহরণ

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




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

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

প্রপার্টি
@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-







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.