সিএসএস (৩) ট্রানজিশন
সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলোকে একটা প্রদত্ত সময় কাল ধরে (অন্য এক মান থেকে) মসৃণভাবে পরিবর্তন করে।
উদাহরণ: সিএসএস(৩) ট্রানজিশন ইফেক্ট দেখার জন্য নিচের এলিমেন্টের উপর মাউস হোভার করুন
সিএসএস(৩) ট্রানজিশন প্রোপার্টি
নিচের টেবিলে সকল ট্রানজিশন প্রোপার্টি দেখানো হল :
এর দ্বারা একটি প্রোপার্টির মধ্যে চারটি ট্রানজিশন প্রোপার্টিকে সেট করা যায়।
ট্রানজিশন ইফেক্ট শুরু হতে বিলম্ব করবে।
ট্রানজিশন শুরু এবং শেষ করার সময় ব্যাপ্তি।
ট্রানজিশন ইফেক্টের জন্য সিএসএস প্রোপার্টির নাম যুক্ত করে।
ট্রানজিশন ইফেক্ট ট্রানজিশন হওয়ার গতি নির্দেশ করে।
সিএসএস(৩) ট্রানজিশন কিভাবে ব্যবহার করা হয় ?
একটি ট্রানজিশন ইফেক্ট তৈরি করতে আপনাকে অবশ্যই দু'টি বিষয় নির্দিষ্ট করতে হবে
- একটি সিএসএস প্রোপার্টি যেটাতে আপনি ইফেক্ট যুক্ত করতে চান
- ইফেক্টের সময়কাল।
নোট : যদি সময়ব্যাপ্তি নির্ধারণ করা না হয় তবে ইফেক্টের কোন ট্রানজিশন হবে না কারণ এটির ডিফল্ট মান 0 থাকে।
নিচের উদাহরণে দেখানো হয়েছে একটি 120px * 120px সবুজ <div> এলিমেন্ট। এই <div> এলিমেন্ট এ width প্রোপার্টির ট্রানজিশন ইফেক্ট যুক্ত করা হয়েছে যার সময়ব্যাপ্তি ৩ সেকেন্ড অর্থাৎ ইফেক্টটি ৩ সেকেন্ড ধরে কাজ করবে :
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 3s; /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
transition: width 3s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
<p> ট্রানজিশন প্রভাব দেখার জন্য ডিভ এলিমেন্টের উপর হোভার করুন। </p>
</body>
</html>
ফলাফল
যখন সিএসএস প্রোপার্টি তার মান পরিবর্তন করবে তখন ইফেক্টটি কাজ শুরু করবে।
এখন, width প্রোপার্টির একটি নতুন ভ্যালু নির্দিষ্ট করে যখন ব্যবহারকারী তার মাউস <div> এলিমেন্টের উপর নিয়ে যাবেঃ
div:hover {
width: 400px;
}
লক্ষ্য করুন যখন মাউসটি এলিমেন্টের উপর থেকে সরিয়ে নেয়া হয় তখন এটি আবার ধীরে ধীরে আগের অবস্থানে ফিরে যায়।
বিভিন্ন প্রোপার্টির ভ্যালু পরিবর্তন
নিচের উদাহরণে width এবং height উভয় প্রোপার্টির জন্য ট্রানজিশন ইফেক্ট ব্যবহার করা হয়েছে এখানে width এর জন্য সময়ব্যাপ্তি ৩ সেকেন্ড এবং height এর জন্য ৪ সেকেন্ড নির্ধারণ করা হয়েছে :
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 3s, height 4s; /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
transition: width 3s, height 4s;
}
div:hover {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div></div>
<p>ট্রানজিশনের প্রভাব দেখার জন্য ডিভ এলিমেন্টির উপরে হোভার করুন।</p>
</body>
</html>
ফলাফল
ট্রানজিশনে বক্ররেখার গতি নির্দিষ্ট
transition-timing-function প্রোপার্টি দ্বারা ট্রানজিশনে বক্ররেখার গতিকে নির্দেশ করা হয়।
transition-timing-function প্রোপার্টির জন্য নিচের ভ্যালুগুলো ব্যবহার করা যেতে পারে :
ease- এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলবে এবং আবার ধীরে ধীরে শেষ করবে (এটি ডিফল্ট)।linear- এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।ease-in- এনিমেশনটি ধীর গতিতে শুরু হবে।ease-out- এনিমেশনটি ধীর গতিতে শেষ হবে।ease-in-out- এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।cubic-bezier(n,n,n,n)- cubic-bezier ফাংশনে আপনি আপনার ভ্যালু নির্ধারণ করতে পারেন।
নিচের উদাহরণে ব্যবহারযোগ্য কিছু ভিন্ন ভিন্ন গতির বক্ররেখা দেখানো হয়েছে :
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 3s;/* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
transition: width 3s;
}
/* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
#linear {-webkit-transition-timing-function: linear;}
#ease {-webkit-transition-timing-function: ease;}
#ease-in {-webkit-transition-timing-function: ease-in;}
#ease-out {-webkit-transition-timing-function: ease-out;}
#ease-in-out {-webkit-transition-timing-function: ease-in-out;}
/* স্ট্যান্ডার্শ সিন্ট্যাক্স */
#linear {transition-timing-function: linear;}
#ease {transition-timing-function: ease;}
#ease-in {transition-timing-function: ease-in;}
#ease-out {transition-timing-function: ease-out;}
#ease-in-out {transition-timing-function: ease-in-out;}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div id="linear">linear</div><br>
<div id="ease">ease</div><br>
<div id="ease-in">ease-in</div><br>
<div id="ease-out">ease-out</div><br>
<div id="ease-in-out">ease-in-out</div><br>
<p>প্রতিক্রিয়া দেখার জন্য ডিভ এলিমেন্টের উপর মাউস এর কার্সরটি নিয়ে যান।</p>
</body>
</html>
ফলাফল
বিলম্ব (Delay) ট্রানজিশন ইফেক্ট
transition-delay প্রোপার্টির নির্দেশ করে যে ট্রানজিশন ইফেক্টটি বিলম্বে শুরু হবে
নিচের উদাহরণে ট্রানজিশন ইফেক্টটি শুরু হতে ১ সেকেন্ড বিলম্ব করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 2s; /* সাফারির জন্য */
-webkit-transition-delay: 1s; /* সাফারির জন্য */
transition: width 2s;
transition-delay: 1s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
<p>ট্রানজিশনের প্রভাব দেখার জন্য ডিভ এলিমেন্টির উপরে হোভার করুন।</p>
<p><b>নোটঃ</b>ট্রানজিশনের প্রভাব শুরু হতে ১ সেকেন্ড বিলম্ব হবে।</p>
</body>
</html>
ফলাফল
ট্রানজিশন + ট্রান্সফর্মেশন
নিচের উদাহরণে ট্রানজিশন ইফেক্টের মধ্যে ট্রান্সফর্মেনশন যুক্ত করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background:green;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* সাফারির জন্য */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 350px;
height: 350px;
-webkit-transform: rotate(180deg); /* সাফারির জন্য */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
<p>div এলিমেন্টের উপর মাউস হোভার করলে ট্রানজেশন প্রভাব দেখতে পারবেন।</p>
</body>
</html>
ফলাফল
ট্রানজিশনের আরও উদাহরণ
সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলো একটি একটি করে নির্ধারণ করা যায় :
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background:green;
/* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
/* স্ট্যান্ডার্ড সিন্ট্যাক্স */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
<p> উপরের ডিভ এলিমেন্টে মাউস নিয়ে গেলে ট্রানজেশনের প্রভাব দেখা যাবে।</p>
<p><b>নোটঃ</b> ট্রানজেশনের প্রভাব ১ সেকেন্ড পর শুরু হবে।</p>
</body>
</html>
ফলাফল
অথবা transition শর্টহ্যান্ড প্রোপার্টি ব্যবহার করেও নির্ধারণ করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 2s linear 1s; /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
transition: width 2s linear 1s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
<p>ট্রানজিশনের প্রভাব দেখার জন্য ডিভ এলিমেন্টির উপরে হোভার করুন।</p>
<p><b>নোটঃ</b>ট্রানজিশনের প্রভাব শুরু হতে ১ সেকেন্ড বিলম্ব হবে।</p>
</body>
</html>
ফলাফল
নোটঃ উপরের উদাহরণগুলো ইন্টারন্টে এক্সপ্লোরার ৯ এবং আগের ভার্সনে কাজ করবে না।
ট্রানজিশনের জন্য ব্রাউজার সাপোর্ট
টেবিলের নাম্বার গুলো নির্দেশ করে ব্রাউজারের প্রথম ভার্সন, যেটি প্রোপার্টিকে সম্পুর্নভাবে সাপোর্ট করে।
ব্রাউজার সাপোর্ট
| প্রোপার্টি | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |