যখন আপনি একটি ওয়েব পেজ ডিজাইন করছেন, আপনি একটি এলিমেন্টে ট্রানজিশন (transition) যোগ করতে চাইতে পারেন। ট্রানজিশনগুলো ট্রিগার হয় যখন একটি নির্দিষ্ট শর্ত পূরণ হয়। উদাহরণস্বরূপ, আপনি চাইতে পারেন একটি বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন হয় যখন ব্যবহারকারী বাটনের ওপর হোভার করে।
আপনি CSS transition প্রপার্টি এবং এর সাব-প্রপার্টিগুলো ব্যবহার করে একটি অ্যানিমেশন ইফেক্ট তৈরি করতে পারেন যখন একটি HTML এলিমেন্টের প্রপার্টিগুলো পরিবর্তন হয়।
এই টিউটোরিয়াল কয়েকটি উদাহরণসহ CSS transitions-এর বেসিক্স এবং transition প্রপার্টি ব্যবহার করে CSS অ্যানিমেশন তৈরি করার উপায় আলোচনা করবে। এই টিউটোরিয়াল শেষে, আপনি CSS transitions এবং transition প্রপার্টি নিয়ে কাজ করার এক্সপার্ট হয়ে যাবেন।
CSS Transitions
ডিফল্টভাবে, যখন একটি CSS প্রপার্টির ভ্যালু পরিবর্তন হয়, ওয়েব পেজ তাৎক্ষণিকভাবেই পরিবর্তনটি প্রয়োগ করে।
উদাহরণস্বরূপ, আপনি যদি একটি স্টাইল পরিবর্তন তৈরি করেন যা এক্টিভেট হয় যখন কার্সর একটি বাটনের ওপর হোভার করে, নতুন স্টাইলটি তৎক্ষণই প্রয়োগ হবে যতক্ষণ না ব্যবহারকারী বাটনের ওপর তাদের কার্সর হোভার করে। যতক্ষণ না ব্যবহারকারীর কার্সর বাটন থেকে দূরে চলে যায়, বাটনটি তার ডিফল্ট স্টাইলে তাৎক্ষণিক রিভার্ট করবে।
CSS transition ফিচার দুটি স্টাইলের মধ্যে একটি স্মুথ ট্রানজিশন তৈরি করতে ব্যবহৃত হয়। আপনি transition প্রপার্টি ব্যবহার করলে, ওয়েব পেজ দুটি স্টাইলের মধ্যে পরিবর্তনটি অ্যানিমেট করবে। এই ফিচার আপনাকে আরও aesthetically-pleasing (সৌন্দর্যーボদ্ধ) স্টাইল পরিবর্তন তৈরি করতে দেয়।
একটি CSS transition-এর দুটি কম্পোনেন্ট আছে। এগুলো হলো:
- আপনি যা একটি এলিমেন্টে প্রয়োগ করতে চান সেই নতুন CSS প্রপার্টি।
- ট্রানজিশনের ড্যুরেশন (duration)।
ডিফল্টভাবে, একটি ট্রানজিশনের ড্যুরেশন ০ সেকেন্ড সেট করা থাকে। এর মানে যদি আপনি একটি ড্যুরেশন ডিফাইন না করেন, আপনি যে ট্রানজিশন স্পেসিফাই করেছেন সেটার কোনো ইফেক্ট হবে না—অন্য কথায়, স্টাইল পরিবর্তনটি তাৎক্ষণিক হবে।
CSS Transition উদাহরণ
ধরুন আমরা একটি ওয়েবসাইটের জন্য একটি বাটন ডিজাইন করছি এবং আমরা চাই বাটনের স্টাইল পরিবর্তন হয় যখন ব্যবহারকারী তাদের কার্সর দিয়ে সেটার ওপর হোভার করে। যখন ব্যবহারকারী বাটনের ওপর তাদের কার্সর হোভার করছে না, বাটনের একটি ব্লু বর্ডার থাকা উচিত। তারপর, যখন ব্যবহারকারী বাটনের ওপর তাদের কার্সর হোভার করে, বাটনের ব্যাকগ্রাউন্ড কালার ডিফল্ট কালার (সাদা) থেকে ব্লু-এ পরিবর্তন হবে।
দুই স্টেটইতে, বাটনটি ১০০px উঁচু এবং ১০০px চওড়া হওয়া উচিত, এবং আমাদের বাটনে টেক্সট সেন্টার্ড হওয়া উচিত। দুটি স্টেটের মধ্যে ট্রানজিশনটি দুটি সেকেন্ড সময় নিতে উচিত।
এই বাটন তৈরি করার জন্য আমরা যে কোডটি ব্যবহার করব:
index.html
<div><p>This is a button.</p></div>
styles.css
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s;
}
div:hover {
background-color: #33CCFF;
}
আমাদের কোড রিটার্ন করে:
[Code result here]
আমাদের কোডে, আমরা বলেছি আমাদের বাটনটি ১০০px চওড়া এবং ১০০px উঁচু হওয়া উচিত এবং বাটনের কন্টেন্ট সেন্টার অ্যালাইনমেন্ট থাকা উচিত। আমরা আমাদের বাটনের জন্য একটি ৩-px-চওয়া স olid ব্লু বর্ডারও স্পেসিফাই করেছি।
আপনি যখন বাটনের ওপর আপনার কার্সর হোভার করবেন, আপনি দেখতে পাবেন এর ব্যাকগ্রাউন্ড কালার ব্লু-এ পরিবর্তন হয়। আপনি আপনার কার্সর দূরে করলে, বাটনের ব্যাকগ্রাউন্ড কালার ব্লু থেকে সাদা-এ পরিবর্তন হয়।
এই উদাহরণে, আমরা background-color প্রপার্টির জন্য দুই সেকেন্ড ট্রানজিশন পেরিয়ড স্পেসিফাই করেছি। এর মানে যখন ব্যবহারকারী বাটনের ওপর কার্সর হোভার করে, বাটনের ব্যাকগ্রাউন্ড কালার সাদা থেকে ব্লু-এ পুরোপুরি পরিবর্তন হতে দুই সেকেন্ড লাগে—অন্য কথায়, পরিবর্তনটি তাৎক্ষণিক নয়।
একইভাবে, যখন ব্যবহারকারী তাদের কার্সর বাটন থেকে দূরে নিয়ে যায়, ব্যাকগ্রাউন্ড কালার ব্লু থেকে সাদা-এ দুটি সেকেন্ডের পেরিয়ডে পরিবর্তন হয়—তাই আবারও, তাৎক্ষণিক নয়। এইভাবে, আমরা কার্সারের প্লেসমেন্টের ভিত্তিতে নতুন ব্যাকগ্রাউন্ড কালারের থেকে এবং তার দিকে একটি স্মুথ, দুই-সেকেন্ড ট্রানজিশন অর্জন করতে পারি।
তারপর আমরা যে স্টাইলটি ট্রিগার করতে চাই যখন ব্যবহারকারী বাটনের ওপর কার্সর হোভার করে সেটা স্পেসিফাই করেছি। আমরা এটি :hover সিলেক্টর ব্যবহার করে অর্জন করেছি। প্রোগ্রাম :hover সিলেক্টরে ডিফাইন করা স্টাইল(গুলো) একটি এলিমেন্টে প্রয়োগ করে যখন একজন ব্যবহারকারী সেই এলিমেন্টের ওপর তাদের কার্সর হোভার করে।
আপনি যদি CSS :hover সিলেক্টর সম্পর্কে আরও জানতে আগ্রহী হন, আমাদের CSS :hover সিলেক্টর গাইড পড়ুন।
Transition Speed Curve
transition-timing-function প্রপার্টি আপনাকে একটি ট্রানজিশন ইফেক্টের স্পিড কার্ভ (speed curve) স্পেসিফাই করতে দেয়। এই প্রপার্টি দ্বারা এক্সেপ্ট করা কিছু ভ্যালু:
transition-timing-function প্রপার্টির ভ্যালু (এবং সংশ্লিষ্ট বর্ণনা)
| Value | Transition Speed Curve বর্ণনা |
| ease | slow start, then a fast acceleration, then a slow end (default value) |
| ease-in | slow beginning, then a fast acceleration |
| ease-out | fast start, then a slow finish |
| linear | the same speed from start to finish |
| cubic-bezier(n,n,n,n) | cubic-bezier transition |
আপনি দেখতে পাচ্ছেন, এই টেবিলের প্রথম ভ্যালু—"ease"—হলো ডিফল্ট ভ্যালু। এর মানে যদি আপনি transition-timing-function প্রপার্টির জন্য কোনো ভ্যালু স্পেসিফাই না করেন, অথবা আপনি একটি ট্রানজিশন স্টাইল করার সময় প্রপার্টিটি স্পেসিফাই না করেন, ওয়েব পেজ এই ভ্যালুটিকে ডিফল্ট হিসেবে ব্যবহার করবে।
আমাদের গত উদাহরণের কোড নিই transition-timing-function প্রপার্টি কীভাবে কাজ করে তা ইলাস্ট্রেট করতে। আমাদের গত উদাহরণে, আমরা একটি "ease" স্পিড কার্ভ স্পেসিফাই করেছি। এর মানে আমাদের বাটনের স্টাইলিং একটি স্টাইল থেকে অন্য স্টাইলে স্লো স্টার্ট, ফাস্ট এক্সিলারেশন, এবং স্লো এন্ড নিয়ে পরিবর্তন হবে।
তবে, ধরুন আমরা আমাদের বাটনকে এর নতুন ব্যাকগ্রাউন্ড কালারে একটি linear transition দিয়ে ট্রানজিশন করতে চাই। আমরা "ease-in" ভ্যালু স্পেসিফাই করে এটি করতে পারি। এখানে এই কোডটি:
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s linear 0.5s;
}
div:hover {
background-color: #33CCFF;
}
আমাদের কোড রিটার্ন করে:
[Result of code]
আমাদের স্টাইলগুলো অধিকাংশটা গত উদাহরণের মতোই। একমাত্র পার্থক্য হলো ease ট্রানজিশন স্পেসিফাই করার বদলে, আমরা linear ট্রানজিশন স্পেসিফাই করেছি। এর মানে ট্রানজিশনের স্পিড একবার ট্রিগার হলে শুরু থেকে শেষ পর্যন্ত কনসিস্টেন্ট থাকবে।
Transition Delay
transition-delay প্রপার্টি আপনাকে ট্রানজিশন ইফেক্টের জন্য একটি ডिले (delay) স্পেসিফাই করতে দেয়। transition-delay প্রপার্টির অ্যাসাইন করা ভ্যালু সেকেন্ডে হওয়া উচিত।
ধরুন আমরা চাই আমাদের বাটনটি এক সেকেন্ড ডिले এর পর তার নতুন ব্যাকগ্রাউন্ড কালারে পরিবর্তন হয়। আমরা এই টাস্ক নিচের কোড ব্যবহার করে অর্জন করতে পারি:
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color ease-in 0.5s;
transition-delay: 1s;
}
div:hover {
background-color: #33CCFF;
}
আমাদের কোড রিটার্ন করে:
[Code result here]
আমাদের কোডে, আমরা আমাদের ট্রানজিশনের ডिले এক সেকেন্ড স্পেসিফাই করেছি। তাই, ট্রানজিশন শুরু হয় না এক সেকেন্ড পেরিয়ে যাওয়া পর্যন্ত ব্যবহারকারী বাটনের ওপর তাদের কার্সর হোভার করা শুরু করার পর।
একাধিক Transitions অ্যাপ্লাই করা
যখন আপনি transitions নিয়ে কাজ করছেন, আপনি সিদ্ধান্ত নিতে পারেন যে আপনি একাধিক ট্রানজিশন ইফেক্ট হলো দেয়া চান।
আপনি এটি করতে পারেন একাধিক ট্রানজিশন স্পেসিফাই করে এবং প্রতিটি ট্রানজিশনকে কমা দিয়ে আলাদা করে। প্রতিটি ট্রানজিশন একটি ড্যুরেশন, স্পিড কার্ভ, এবং অন্য কোনো অ্যাট্রিবিউট 가질 수 있습니다 যা একটি রেগুলার ট্রানজিশন ব্যবহার করে।
উদাহরণস্বরূপ, আমাদের আগের বাটন উদাহরণটি নিই। ধরুন আমরা শুধু আমাদের বাটনের ব্যাকগ্রাউন্ড কালার ব্লু-এ পরিবর্তন করতে চাই না, আমরা বাটনের বর্ডার কালারও পিংক-এ পরিবর্তন করতে চাই। এই দুটোই ঘটবে যখন ব্যবহারকারী এলিমেন্টের ওপর কার্সর হোভার করে। আমরা এই টাস্ক অর্জন করতে নিচের কোড ব্যবহার করতে পারি:
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s, border 2s;
}
div:hover {
background-color: #33CCFF;
border: solid 3px lightpink
}
আমাদের কোড রিটার্ন করে:
[Code result here]
আপনি যখন বাটনের ওপর হোভার করবেন, এর ব্যাকগ্রাউন্ড কালার ব্লু-এ এবং এর বর্ডার কালার লাইট পিংক-এ পরিবর্তন হবে। এই ট্রানজিশনটি দুই সেকেন্ডে সম্পন্ন হবে।
একটি ট্রানজিশন লিস্টে প্রতিটি ট্রানজিশন যে অর্ডারে দেখায় সেটা ট্রানজিশন কীভাবে দেখাবে সেটাকে এফেক্ট করে না।
CSS Transition Longhand vs Shorthand
আমাদের উপরের উদাহরণগুলোতে, আমরা আমাদের ট্রানজিশন স্টাইল করার জন্য transition প্রপার্টি ব্যবহার করেছি। Transition প্রপার্টি CSS-এ একটি ট্রানজিশন ডিফাইন করতে ব্যবহৃত চারটি ইনডিভিজুয়াল সাব-প্রপার্টির শর্টহ্যান্ড। এই চারটি সাব-প্রপার্টি হলো:
- transition-property: সেট করে কোন প্রপার্টিগুলোর ওপর ট্রানজিশন ইফেক্ট প্রয়োগ হবে।
- transition-duration: ইন্ডিকেট করে ট্রানজিশন কতক্ষণ টিকবে।
- transition-timing-function: ট্রানজিশনের স্পিড ডিফাইন করে।
- transition-delay: ট্রানজিশনের শুরুতে ডिले করে।
আমাদের উপরের উদাহরণ ব্যবহার করে দেখাই কীভাবে এই প্রপার্টিগুলো কাজ করে। ধরুন আমরা একটি ১০০px বাই ১০০px বাটন তৈরি করতে চাই যেটার একটি ব্লু বর্ডার, ডিফল্ট (সাদা) ব্যাকগ্রাউন্ড কালার, এবং সেন্টার-অ্যালাইনড টেক্সট। আমাদের বাটনের ব্যাকগ্রাউন্ড কালার ব্যবহারকারী তাদের কার্সর দিয়ে হোভার করলে ব্লু-এ ট্রানজিশন হবে। এই ট্রানজিশনটি ২ সেকেন্ড সময় নেবে, এবং ব্যবহারকারী বাটনের ওপর হোভার করা শুরু করার ০.৫ সেকেন্ড পরে শুরু হবে।
এই টাস্ক অর্জন করতে আমরা নিচের কোড ব্যবহার করতে পারি:
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 0.5s;
}
div:hover {
background-color: #33CCFF;
}
আমাদের কোড রিটার্ন করে:
[Code result]
আপনি দেখতে পাচ্ছেন, আমরা একটি বাটন তৈরি করেছি যা ব্লু ব্যাকগ্রাউন্ড কালারের থেকে এবং তার দিকে ট্রানজিশন করে। এই ট্রানজিশনগুলো ঘটে যখন ব্যবহারকারী তাদের কার্সর বাটনের ওপর এবং দূরে হোভার করে, যথাক্রমে।
আমাদের কোডে, আমরা আমাদের ট্রানজিশনের জন্য চারটি ট্রানজিশন সাব-প্রপার্টি (transition-property, transition-duration, transition-timing-function, এবং transition-delay) স্পেসিফাই করেছি। আমরা আমাদের আগের উদাহরণ থেকে স্টাইলগুলোকেও ব্যবহার করেছি আমাদের বাটনের height, width, text alignment, এবং border color সেট করার জন্য।
বিকল্পভাবে, আমরা transition shorthand ব্যবহার করতে পারি। Shorthand ব্যবহার করলে আমরা আমাদের CSS transition কে এক লাইন কোডে স্পেসিফাই করতে পারি বরং চার লাইন যা আমরা আগে ব্যবহার করেছি। Transition shorthand-এর সিনট্যাক্স নিচের মতো:
transition: transition-property transition-duration transition-timing-function transition-delay;
উপর স্পেসিফাই করা ভ্যালুদের অর্ডার হলো আপনি একটি ট্রানজিশন তৈরি করার সময় যে অর্ডার ব্যবহার করতে হবে।
Transition shorthand কীভাবে কাজ করে তা ইলাস্ট্রেট করতে একটি উদাহরণ ব্যবহার করি। আমাদের আগের উদাহরণ থেকে বাটনটি transition shorthand ব্যবহার করে তৈরি করার কোড:
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s ease 0.5s;
}
div:hover {
background-color: #33CCFF;
}
আমাদের কোড রিটার্ন করে:
[Code result here]
আপনি দেখতে পাচ্ছেন, আমরা এখানে সেম স্টাইলগুলো প্রয়োগ করেছি যা আমরা পূর্বের উদাহরণে করেছিলাম। একমাত্র পার্থক্য হলো আমাদের ট্রানজিশনের স্টাইলগুলো প্রতিটি ইনডিভিজুয়াল সাব-প্রপার্টি আলাদা লাইনে লিস্ট করার বদলে, আমরা transition shorthand ব্যবহার করেছি।
উপসংহার
CSS transition প্রপার্টি দুটি স্টাইলের মধ্যে কী ধরনের ট্রানজিশন হবে সেটা ডিফাইন করতে ব্যবহৃত হয়। Transition প্রপার্টির চারটি শর্টহ্যান্ড প্রপার্টি আছে: transition-property, transition-delay, transition-timing-function, এবং transition-duration। আপনি এই সাব-প্রপার্টিগুলো ব্যবহার করে ট্রানজিশন স্টাইল এলিমেন্টগুলো ইনডিভিজুয়ালি সেট করতে পারেন।
উদাহরণসহ, এই টিউটোরিয়াল আলোচনা করেছি কীভাবে CSS-এ transition প্রপার্টি এবং এর চারটি সাব-প্রপার্টি ব্যবহার করে একটি ট্রানজিশন তৈরি করতে হয়। এখন আপনি CSS transitions প্রফেশনাল ওয়েব ডেভেলপারের মতো তৈরি করতে প্রস্তুত!
