Feb 09

সিএসএস৩ ট্রানজিশানস (CSS3 Transitions)

ডব্লিওথ্রিসি সিএসএস-থ্রিতে যেসব নতুন ফিচার যোগ করেছে তার মধ্যে উল্লেখযোগ্য ও অভিনব একটি হলো ট্রানজিশানস। ট্রানজিশানস ব্যবহার করে একটি স্টাইলকে অন্য স্টাইলে রূপান্তরিত করা যায় এবং এর জন্য ফ্লাশ অথবা জাভাস্ক্রিপ্ট ব্যবহার করতে হয় না।

 

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

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

Property chrome edge ie firefox safari opera
transition

26.0
4.0 -webkit-

12.0

10.0

16.0
4.0 -moz-

6.1
3.1 -webkit-

12.1
10.5 -o-
transition-delay

26.0
4.0 -webkit-

12.0

10.0

16.0
4.0 -moz-

6.1
3.1 -webkit-

12.1
10.5 -o-
transition-duration

26.0
4.0 -webkit-

12.0

10.0

16.0
4.0 -moz-

6.1
3.1 -webkit-

12.1
10.5 -o-
transition-property

26.0
4.0 -webkit-

12.0

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-

12.0

10.0

16.0
4.0 -moz-

6.1
3.1 -webkit-

12.1
10.5 -o-

 

সিএসএস ট্রানজিশনস কি?

সিএসএস ট্রানজিশান হলো এক ধরণের ইফেক্ট যা একটি এইচটিএমএল এলিমেন্টকে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তিত হতে দেয়। এটি করতে আপনাকে দু’টো বিষয় নির্ধারণ করে দিতে হবেঃ

যে সিএসএস প্রপার্টিতে আপনি ইফেক্ট যোগ করতে চান
ইফেক্ট এর ডিউরেশন অর্থাৎ সেটি কত সময় ধরে অ্যাক্টিভ থাকবে

উদাহরণঃ width প্রপার্টিতে একটি ট্রানজিশান যোগ করা যাক, যার ব্যাপ্তি হবে ২ সেকেন্ডঃ

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

লক্ষ্যণীয়ঃ যদি সময় সীমা নির্দিষ্ট করে দেয়া না হয়, ট্রানজিশানটির ইফেক্ট বুঝা যাবেনা, কারন ট্রানজিশনের ডিফল্ট ব্যাপ্তি বা সময়সীমা হলো শূন্য (০) সেকেন্ড।

সিএসএস প্রপার্টিটি তার ভ্যালু পরিবর্তন করলেই ট্রানজিশান ইফেক্ট কাজ করা শুরু করে। সাধারণত একটি সিএসএস প্রপার্টি তার ভ্যালু পরিবর্তন করে যখন একজন ইউজার সেই প্রপার্টির উপর মাউস নিয়ে যান।

উদাহরণঃ

এলিমেন্টে হোভার যোগ করা যাকঃ

div:hover {
    width: 300px;
}

লক্ষ্যনীয়ঃ যখন মাউসের কার্সর এলিমেন্টটির উপর থেকে সরিয়ে নেয়া হয় তখন সেটি তার পূর্বের অবস্থায় ফিরে যায়।

 

একসাথে অনেকগুলো ট্রানজিশান যোগ করা

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

উদাহরণঃ width, height, এবং transformation এর সাথে ট্রানজিশান যোগ করা যাকঃ

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

 

ট্রানজিশানের আরও কিছু উদাহরণ

নিচের উদাহরণটিতে চারটি ট্রানজিশান প্রপার্টিকেই দেখানো হয়েছেঃ

div {
     /* For Safari 3.1 to 6.0 */
     -webkit-transition-property: width;
     -webkit-transition-duration: 1s;
     -webkit-transition-timing-function: linear;
     -webkit-transition-delay: 2s;
     /* Standard syntax */
     transition-property: width;
     transition-duration: 1s;
     transition-timing-function: linear;
     transition-delay: 2s;
 }

 

নিচের উদাহরণে উপরের ট্রানজিশানের মতো একই ধরণের ইফেক্ট তবে এখানে ট্রানজিশান প্রপার্টিগুলোকে শর্টহ্যান্ড বা সংক্ষিপ্ত করে দেখানো হয়েছেঃ

div {
     -webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */
     transition: width 1s linear 2s;
 }

 

 

সিএসএস ট্রানজিশান প্রপার্টিসমুহ

নিচে টেবলে সবগুলো ট্রানজিশান প্রপার্টিকে দেখানো হয়েছেঃ

transition -চারটি ট্রানজিশান প্রপার্টিকে একটিমাত্র (সিঙ্গেল) প্রপার্টি হিসেবে দেখাতে
ব্যবহার করা হয়।

  • transition-delay -কখন ট্রানজিশান ইফেক্ট শুরু হবে তা বলে দেয়
  • transition-duration -ট্রানজিশানটি কত সেকেন্ড বা মিলিসেকেন্ডে তার ইফেক্ট সম্পূর্ণ করবে তা নির্ধারণ করে
  • transition-property -কোন সিএসএস প্রপার্টির জন্য ইফেক্ট কাজ করবে তা নাম ঠিক করে দেয়
  • transition-timing-function -ট্রানজিশান ইফেক্টের গতি কি রকম হবে তা নির্দিষ্ট করে দেয়।