সিএসএস৩ স্থানান্তর - Css3 Transitions

সিএসএস 3.0 এর ট্রানজিশন, প্রোপার্টি গুলো ব্যাবহার করে, কোন এইচটিএমএল এলিমেন্টকে একটা নির্দিষ্ট সময় কাল ধরে (অন্য কোণ এক মান থেকে, অন্য মানে) মসৃণভাবে পরিবর্তন করা যায়। সিএসএস 3.0 এর ট্রানজিশন ইফেক্ট আরও ভালভাবে বোঝার জন্য নিচের এলিমেন্টের উপর মাউস হোভার করুন।

Transition প্রোপার্টি

সিএসএস এর 3.0 সংস্করণে যে সকল নতুন Transition প্রোপার্টি যুক্ত করা হয়েছে, এগুলো হল নিম্নরূপ।

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

Transition ব্যাবহার

কোন এইচটিএমএল এলিমেন্টে transition ব্যাবহার করে কোন পরিবর্তন অর্থাৎ animation করতে হলে, ২টি বিষয় নির্ধারণ করতে হবে।

• একটি সিএসএস প্রোপার্টি যেটাতে ইফেক্ট যুক্ত করা হবে এবং
• যুক্ত করা ইফেক্টের সময়কাল।

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে দেখানো হয়েছে একটি 150px * 150px নীল div এলিমেন্ট। এই div এলিমেন্ট এ width প্রোপার্টির ট্রানজিশন ইফেক্ট যুক্ত করা হয়েছে যার সময়ব্যাপ্তি 4 সেকেন্ড অর্থাৎ ইফেক্টটি 4 সেকেন্ড ধরে কাজ করবে।

div {
   width: 150px;
   height: 150px;
   background: blue;
   -webkit-transition: width 4s; /* for Safari */
   transition: width 4s;
   }
   
div:hover {
   width: 300px;
   }

কোড এডিটর

যখন সিএসএস প্রোপার্টি তার মান পরিবর্তন করবে তখন ইফেক্টটি কাজ শুরু করবে। এখন, width প্রোপার্টির একটি নতুন মান নির্ধারণ করে যখন ব্যবহারকারী তার মাউস div এলিমেন্টির উপর নিয়ে যাবে। এখানে লক্ষ্যনীয় বিষয় হল, যখন মাউসটি এলিমেন্টের উপর থেকে সরিয়ে নেয়া হয় তখন এটি আবার ধীরে ধীরে আগের অবস্থানে ফিরে আসে।

নোট - যদি transition এর সময়ব্যাপ্তি নির্ধারণ করা না হয় তবে ইফেক্টের কোন ট্রানজিশন হবে না কারণ এটি পূর্ব-নির্ধারিত বা default মান 0 থাকে।

একাধিক প্রোপার্টির মান পরিবর্তন

transition প্রোপার্টির সাথে একাধিক সিএসএস প্রোপার্টি ব্যাবহার করে তাদের মান বা value পরিবর্তন করা যায়।

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে width এবং height, এই উভয় প্রোপার্টির জন্য ট্রানজিশন ইফেক্ট ব্যবহার করা হয়েছে, এখানে width এর জন্য সময়ব্যাপ্তি 4 সেকেন্ড এবং height এর জন্য 6 সেকেন্ড নির্ধারণ করা হয়েছে।

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

কোড এডিটর

transition-timing-function প্রোপার্টি

সিএসএস এর transition-timing-function প্রপার্টি ব্যাবহার করে ট্রানজিশনে বক্ররেখার কিরকম গতি হবে তা নির্ধারণ করা যায়। transition-timing-function প্রপার্টিতে যে সকল মান বা value ব্যাবহার করা যায়, সেগুলো নিম্নরূপ।

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

নিচের উদাহরণে transition-timing-function প্রপার্টির সকল মান ব্যাবহার করে কিছু সিএসএস স্টাইল কোড দেখুন।

#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;
   }

কোড এডিটর

বিলম্ব বা Delay ট্রানজিশন ইফেক্ট

সিএসএস এর transition-delay প্রোপার্টি ব্যবহার করে ট্রানজিশন ইফেক্ট শুরু করাকে বিলম্ব বা Delay করা যায়। নিচে একটি উদাহরণ দেখুন যেখানে ট্রানজিশন ইফেক্টটি শুরু হতে 1 সেকেন্ড বিলম্ব বা Delay করে।

এখানে অ্যাপল Safari ওয়েব ব্রাউজারে transition-delay প্রোপার্টি সমর্থন করার জন্য -webkit- প্রিফিক্স ব্যাবহার করা হয়েছে।

div {
   -webkit-transition-delay: 1s; /* for Safari */
   transition-delay: 1s;
   }

কোড এডিটর

ট্রানজিশন এবং ট্রান্সফর্মেশন

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

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

কোড এডিটর

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

সকল transition প্রোপার্টি গুলো ব্যাবহার করে নিচের উদাহরনে কিছু সিএসএস স্টাইল কোড দেখুন।

div{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

কোড এডিটর

সকল transition প্রোপার্টি গুলো অর্থাৎ transition-property, transition-duration, transition-timing-function এবং transition-delay প্রোপার্টি গুলোর শর্টহ্যান্ড হিসেবে transition প্রোপার্টি ব্যাবহার করা যায়। এক্ষেত্রে সকল প্রোপার্টি গুলোর মান ধারাবাহিক ভাবে উল্লেখ করতে হয়।

নিচের উদাহরনে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে transition প্রোপার্টি ব্যাবহার করা হয়েছে।

div {
   transition: width 3s linear 1s;
   }

কোড এডিটর

ব্রাউজার সমর্থন

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