X

X

X

CSS3 Transitions


CSS3 Transitions

CSS3 transition এর মাধ্যমে কোনো ইলামেন্টের সিএসএস প্রপার্টিগুলোকে এক মান থেকে আরেক মানে পরিবর্তন করা যায়। এই ফিচারটি ব্যবহার করে সিএসএস এনিমেশন তৈরি করা হয়।

উদাহরণ: নিচের ইলামেন্টের উপর মাউস হোভার করে প্রক্রিয়াটির ফলাফল দেখুন:

CSS3

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

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

CSS3 Transition -এর ব্যবহার পদ্ধতি?

সিএসএস৩ ট্রানজিশন ব্যবহার করার জন্য, নিচের দুটি বিষয় অবশ্যই বর্ণনা করতে হবে:

  • কাঙ্খিত CSS property
  • ট্রানজিশন সময়

বি:দ্র: যদি ট্রানজিশন সময় নির্ধারণ করা না হয়, তবে কোনো এনিমেটেড ফলাফল পাবেন না। কেননা ডিফল্ট মান হচ্ছে ০।

The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:
নিচে একটি 100px * 100px red <div> element দেখানো হলো, যেটিতে প্রস্থের জন্য ট্রানজিশন ইফেক্ট সেট করা হয়েছে এবং ট্রানজিশন সময় দেওয়া হয়েছে ২ সেকেন্ড।

উদাহরণ

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

যখন CSS property (width) এর মান পরিবর্তিত হওয়া শুরু করবে, ঠিক তখন ট্রানজিশন শুরু হবে।

এবার যখন <div> element এর উপর মাউস হোভার করা হবে, তখন এর প্রস্থের জন্য নতুন একটি মান সেট করি:

Code Example

div:hover {
    width: 300px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

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


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

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

Code Example

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 4s;
}

div:hover {
    width: 300px;
    height: 300px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Transition এর জন্য স্পিড কার্ভ নির্ধারণ

transition-timing-function property ব্যবহার করে ট্রানজিশন স্পিড কার্ভ নির্ধারণ করা হয়:

transition-timing-function property এর জন্য নিম্নোক্ত মান সমূহ ব্যবহৃত হয়:

  • ease – transition effect -টি ধীরে ধীরে শুরু হয়, তারপর বৃদ্ধিপায় এবং শেষে আবার হ্রাস পায়। এটি ডিফল্ট মান।
  • linear – transition effect -টি সবসময় একই হারে চলতে থাকে।
  • ease-in – transition effect -টি ধীরে ধীরে শুরু হয়।
  • ease-out – transition effect -টি ধীরে ধীরে শেষ হয়।
  • ease-in-out – transition effect টি ধীরে ধীরে শুরু ও শেষ হয়।
  • cubic-bezier(n,n,n,n) – cubic-bezier function ফাংশন ব্যবহার করে ইচ্ছানুযাী মান সেট করতে পারবেন।

নিচে বিভিন্ন স্পিড কার্ভের বর্ণনা উদাহরণ দেওয়া হলো:

Code Example

/* Standard syntax */
#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;}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Transition Effect দীর্ঘায়ন

transition-delay property দিয়ে ট্রানজিশন ইফেক্ট কত দেরীতে শুরু হবে তা নির্ধারণ করা হয়।

নিচের উদাহরণে ট্রানজিশন ইফেক্টটি ১ সেকেন্ড পরে শুরু হয়:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Transition + Transformation

নিচের উদাহরণে একই সাথে ট্রানজিশন ও ট্রান্সফরমেশন ইফেক্ট সংযুক্ত করা হলো:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

CSS3 transition property সমূহ একটির সাথে আরেকটিকে এভাবে উপস্থাপণ করা যায়:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


অথবা শর্টহ্যান্ড transition প্রপার্টি ব্যবহার করে একসাথে এই কাজটি করা যায়:

Code Example

transition: width 2s linear 1s;

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চর্চা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »


CSS3 Transition Property সমূহ

The following table lists all the transition properties:

প্রপার্টি বর্ণনা
transition একসাথে চারটি ট্রানজিশন প্রপার্টির মান সেট করার শর্টহ্যান্ড প্রপার্টি।
transition-delay transition effect কত দেরীতে শুরু হবে তা নির্ধারণ করার জন্য ব্যবহৃত হয়।
transition-duration transition effect কত সময়ের মধ্যে শেষ হবে তা নির্ধারণ করার জন্য ব্যবহৃত হয়।
transition-property কোন সিএসএস প্রপার্টিতে ট্রানজিশন ইফেক্ট যুক্ত করা হবে, তা বর্ণনা করার জন্য ব্যবহৃত হয়।
transition-timing-function transition effect এর স্পিড কার্ভ বর্ণনা করার জন্য ব্যবহৃত হয়।