CSS ট্রানজিশন

CSS ট্রানজিশন

CSS ট্রানজিশন আপনাকে একটি নির্দিষ্ট সময়ের মধ্যে এক্সপ্রেশন মানকে সমস্তক্ষণভাবে পরিবর্তন করতে দেয়。

এই ইলেকট্রনটির উপর মাউস নিয়ে এসে দেখুন CSS ট্রানজিশন ইফেক্টকে:

CSS

এই চাপে, আপনি নিম্নলিখিত এক্সপ্রেশনগুলো শিখবেন:

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

ট্রানজিশনের ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম ব্রাউজার সংস্করণটি উল্লেখ করে, যা এই এক্সপ্রেশনকে পূর্ণাঙ্গভাবে সমর্থন করে。

বৈশিষ্ট্য চ্রোম আইই ফায়ারফক্স সাফারি ওপেরা
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

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

যদি আপনি ট্রানজিশন ইফেক্ট তৈরি করতে চান, তবে আপনাকে দুটি কিছুই নির্দিষ্ট করতে হবে:

  • আপনি যে CSS এক্সপ্রেশনকে ইফেক্ট যোগ করতে চান
  • ইফেক্টের মেয়াদ

মনে রাখুন:যদি মেয়াদ অংশটি নির্ধারণ না হয়, তখন ট্রানজিশন ইফেক্টটি কার্যকর হবে না, কারণ ডিফল্ট মান 0 হয়。

নিচের উদাহরণটি 100px * 100px লাল <div> ইলেকট্রনটির প্রদর্শন করে। <div> ইলেকট্রনটি width এক্সপ্রেশনকেও ট্রানজিশন ইফেক্ট নির্ধারণ করে, যার মেয়াদ 2 সেকেন্ড:

প্রতিমান

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

যখন নির্দিষ্ট CSS এক্সপ্রেশন (width) মান পরিবর্তিত হয়, তখন ট্রানজিশন ইফেক্টটি শুরু করা হবে。

এখন, আমরা width এক্সপ্রেশনকে <div> ইলেকট্রনের উপর হলোগা মাউস সম্পর্কে একটি নতুন মান নির্ধারণ করতে চাইবো:

প্রতিমান

div:hover {
  width: 300px;
}

আপনাদের নিজেদের পরীক্ষা করুন

মনে রাখুন, যখন কার্যক্রমটির উপর হলোগা ছেড়ে যায়, তখন তা ক্রমশঃ তার মূল শৈলীতে ফিরে যাবে。

কিছু বৈশিষ্ট্য মান পরিবর্তন করুন

নিচের উদাহরণটিতে, width এবং height বৈশিষ্ট্যগুলোকে ট্রানজিশন প্রভাব যোগ করা হল, width 2 সেকেন্ড, height 4 সেকেন্ড:

প্রতিমান

div {
  transition: width 2s, height 4s;
}

আপনাদের নিজেদের পরীক্ষা করুন

ট্রানজিশন গতিশীলতা কারণটি নির্দিষ্ট করুন

transition-timing-function ট্রানজিশন প্রভাবের গতিশীলতা কারণটি নির্দিষ্ট করে:

transition-timing-function বৈশিষ্ট্যটি নিচের মানগুলোকে স্বীকৃতি দেয়:

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

নিচের উদাহরণগুলোতে, বিভিন্ন গতিশীলতা কারণকে দেখা যায়:

প্রতিমান

#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-delay বৈশিষ্ট্যটি ট্রানজিশন প্রভাবের বিলম্ব (সেকেন্ডে অনুযায়ী) নির্দিষ্ট করে:

নিচের উদাহরণটিতে, 1 সেকেন্ড বিলম্ব থাকা হয়:

প্রতিমান

div {
  transition-delay: 1s;
}

আপনাদের নিজেদের পরীক্ষা করুন

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

নিচের উদাহরণটিতে, ট্রানজিশন এবং ট্রানসফর্মের প্রভাব যোগ করা হল:

প্রতিমান

div {
  transition: width 2s, height 2s, transform 2s;
}

আপনাদের নিজেদের পরীক্ষা করুন

আরও ট্রানজিশন প্রতিমান

আপনি CSS ট্রানজিশন বৈশিষ্ট্যকে এক-একটা উল্লেখ করতে পারেন, যেমন:

প্রতিমান

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

আপনাদের নিজেদের পরীক্ষা করুন

বা সংক্ষিপ্ত ব্যবহার করুন transition বৈশিষ্ট্য:

প্রতিমান

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

আপনাদের নিজেদের পরীক্ষা করুন

CSS ট্রানজিশন বৈশিষ্ট্য

নিচের সারণীতে সমস্ত CSS ট্রানজিশন বৈশিষ্ট্যগুলো উপস্থাপিত হল:

বৈশিষ্ট্য বর্ণনা
transition 简写属性，用于将四个过渡属性设置为单一属性。
transition-delay 规定过渡效果的延迟（以秒计）。
transition-duration 规定过渡效果要持续多少秒或毫秒。
transition-property 规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function 规定过渡效果的速度曲线。