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



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

CSS3


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

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

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


ট্রানজিশন কিভাবে ব্যবহার করা হয় ?

একটি ট্রানজিশন ইফেক্ট তৈরি করতে হলে অবশ্যই দু'টি বিষয় নির্দিষ্ট করতে হবে -

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

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

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

উদাহরণ

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



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

উদাহরণ

div:hover {
width: 300px;
}



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


বিভিন্ন প্রোপার্টির ভ্যালু পরিবর্তন

নিচের উদাহরণে 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 প্রোপার্টির জন্য নিচের মান বা value গুলো ব্যবহার করা যায় -
ease - এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলে এবং আবার ধীরে ধীরে শেষ হয়, এটি ডিফল্ট মান।
linear - এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।
ease-in - এনিমেশনটি ধীর গতিতে শুরু হবে।
ease-out - এনিমেশনটি ধীর গতিতে শেষ হবে।
ease-in-out - এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।
cubic-bezier(n,n,n,n) - cubic-bezier ফাংশনে আপনি আপনার ভ্যালু নির্ধারণ করতে পারেন।

নিচে উদাহরণে ব্যবহারযোগ্য কতগুলো ভিন্ন ভিন্ন গতির বক্ররেখা দেখানো হয়েছে।

উদাহরণ

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




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

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

উদাহরণ

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




ট্রানজিশন + ট্রান্সফর্মেশন

নিচে একটি উদাহরণ দেখুন, এখানে ট্রানজিশন ইফেক্টের মধ্যে ট্রান্সফর্মেনশন যুক্ত করা হয়েছে।

উদাহরণ

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




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

সিএসএস ৩ এর ট্রানজিশন প্রোপার্টি গুলো একটি একটি করেও নির্ধারণ করা যায়। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

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



ওপরের একই উদাহরণটি transition শর্টহ্যান্ড প্রোপার্টি ব্যবহার করে দেখুন।

উদাহরণ

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








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

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