CSS এনিমেশন

CSS এনিমেশন

CSS এমনভাবে ব্যবহার করা যেতে পারে যাতে HTML ইলেমেন্টের অ্যানিমেশন ঘটবে, জেভাস্ক্রিপ্ট বা ফ্ল্যাশ ব্যবহার করা যাবে না!

CSS

এই চাপটিতে, আপনি নিম্নলিখিত বৈশিষ্ট্যগুলি শিখবেন:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

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

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

প্রতিশব্দ চ্রোম আইই ফায়ারফক্স স্যাফারি ওপেরা
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

কি হলো CSS অ্যানিমেশন?

অ্যানিমেশন ইলেমেন্টকে একটি শৈলী থেকে আরেকটি শৈলীতে গুলোগুলোভাবে পরিবর্তন করে।

আপনি যে কোনও সংখ্যক CSS শব্দকোষকে স্বাধীনভাবে পরিবর্তন করতে পারেন。

যদি আপনি CSS অ্যানিমেশন ব্যবহার করতে চান, তবে প্রথমে অ্যানিমেশনের কীওয়ার্ড ফ্রেমগুলি নির্ধারণ করতে হবে。

কীওয়ার্ড ফ্রেম শৈলী নির্ধারণ করে, ইলেমেন্টটি কোনও নির্দিষ্ট সময়ের সাথে কী শৈলীতে থাকবে।

@keyframes শেষ রূপ

আপনি যদি... @keyframes শেষ রূপে, শৈলী ব্যবহারের সাথে CSS শেষ রূপে ব্যবহার করে, অ্যানিমেশন নির্দিষ্ট সময়ে সরাসরি বর্তমান শৈলী থেকে নতুন শৈলীতে পরিবর্তন করবে。

অ্যানিমেশনটি কার্যকর করতে, অ্যানিমেশনকে কোনও ইলেমেন্টের সাথে বাঁধা দিতে হবে。

এই উদাহরণটি "example" অ্যানিমেশনকে <div> ইলেমেন্টের সাথে বাঁধা দেয়। অ্যানিমেশন 4 সেকেন্ড সময়ের মধ্যে চলবে, এবং <div> ইলেমেন্টের ব্যাকগ্রাউন্ড কালার লাল থেকে প্রস্তুত করে হলুদ হবে:

উদাহরণ

/* এনিমেশন কোড */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* এই ইলেমেন্টে অ্যানিমেশন প্রভাব আরোপ করুন */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

স্বয়ং প্রয়োগ করুন

নোট:animation-duration শব্দকোষ নির্ধারণ করে এটি যত সময় অ্যানিমেশন সমাপ্ত হবে। animation-duration যদি কোনও শব্দকোষ না দেওয়া হয়, তবে অ্যানিমেশন ঘটবে না, কারণ ডিফল্ট মান 0s (0 সেকেন্ড) হয়。

উপরোক্ত উদাহরণে, "from" এবং "to" (0% (ভাবমূলক)) এবং 100% (সমাপ্ত)) শব্দকোষ ব্যবহার করে, আমরা শৈলীর পরিবর্তনের সময় নির্ধারণ করেছি。

আপনি পরিমাণমাপ শতাংশও ব্যবহার করতে পারেন। শতাংশ ব্যবহার করে, আপনি যে কোনও শৈলীর পরিবর্তন জোগানোর জন্য কোনও সংখ্যক শৈলী পরিবর্তন যোগ করতে পারেন。

এই উদাহরণটি অ্যানিমেশনের 25% সমাপ্ত হওয়ার পর, 50% সমাপ্ত হওয়ার পর এবং অ্যানিমেশন 100% সমাপ্ত হওয়ার পর ডিভ ইলেমেন্টের ব্যাকগ্রাউন্ড কালার পরিবর্তন করবে:

উদাহরণ

/* এনিমেশন কোড */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* এনিমেশন আপ্লাইক করার এলিমেন্ট */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

স্বয়ং প্রয়োগ করুন

নিম্নলিখিত উদাহরণে, এনিমেশন 25%，50% এবং 100% পূর্ণ হওয়ার সময় পটভূমির রঙ এবং <div> এলিমেন্টের অবস্থান পরিবর্তন করেছে:

উদাহরণ

/* এনিমেশন কোড */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* এনিমেশন আপ্লাইক করার এলিমেন্ট */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

স্বয়ং প্রয়োগ করুন

এনিমেশন বিলম্ব

animation-delay এই প্রতিভা এনিমেশন শুরুর বিলম্ব নির্দেশ করে

নিম্নলিখিত উদাহরণে, এনিমেশন শুরু করার আগে 2 সেকেন্ড বিলম্বে চলেছে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

স্বয়ং প্রয়োগ করুন

নেতিবাচক মানও অনুমোদিত হয়।যদি নেতিবাচক মান ব্যবহার করা হয়, তবে এনিমেশন নির্দিষ্ট N সেকেন্ড পর শুরু করবে

নিম্নলিখিত উদাহরণে, এনিমেশন 2 সেকেন্ড পর শুরু করবে, যেমন তা ইতিমধ্যেই 2 সেকেন্ড চলেছে এমন মনে হবে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

স্বয়ং প্রয়োগ করুন

এনিমেশনকে কতবার চলাকে নির্দেশ করা

animation-iteration-count এই প্রতিভা এনিমেশনকে কতবার চলাকে নির্দেশ করে

নিম্নলিখিত উদাহরণে এনিমেশন 3বার চলাকে থামিয়েছে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

স্বয়ং প্রয়োগ করুন

নিম্নলিখিত উদাহরণে "infinite" মান ব্যবহার করে এনিমেশন অবশিষ্ট থাকতে চলেছে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

স্বয়ং প্রয়োগ করুন

এনিমেশনকে বিপরীত এবং পারস্পরিকভাবে চলানো

animation-direction এই প্রতিভা এনিমেশনকে এগিয়ে, পিছনে কিংবা পারস্পরিকভাবে চলাকে নির্দেশ করে

animation-direction এই প্রক্রিয়াটি নিম্নলিখিত ভ্যালুস স্বীকার করতে পারে:

  • normal - এনিমেশন স্বাভাবিকভাবে চলেছে (এগিয়ে)।ডিফল্ট মান
  • reverse - এনিমেশন পিছনের দিকে এবং এগিয়ে চলেছে (বিপরীত দিকে)
  • alternate - এনিমেশন প্রথমে এগিয়ে এবং পরে পিছনে চলেছে
  • alternate-reverse - এনিমেশন প্রথমে পিছনে এবং পরে এগিয়ে চলেছে

এই উদাহরণে এনিমেশন পিছনের দিকে এবং এগিয়ে চলেছে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

স্বয়ং প্রয়োগ করুন

নিম্নলিখিত উদাহরণে "alternate" মান ব্যবহার করে এনিমেশন প্রথমে এগিয়ে এবং পরে পিছনে চলেছে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

স্বয়ং প্রয়োগ করুন

নিম্নলিখিত উদাহরণে "alternate-reverse" মান ব্যবহার করে এনিমেশন প্রথমে পিছনে এবং পরে এগিয়ে চলেছে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

স্বয়ং প্রয়োগ করুন

অ্যানিমেশনটির গতিবিধি কোণচাপকে নির্ধারণ করুন

animation-timing-function এই প্রক্রিয়াটি অ্যানিমেশনটির গতিবিধি কোণচাপকে নির্ধারণ করে。

animation-timing-function এই প্রক্রিয়াটি নিম্নলিখিত ভ্যালুস স্বীকার করতে পারে:

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

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

উদাহরণ

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

স্বয়ং প্রয়োগ করুন

অ্যানিমেশনটির পূর্ণকরণ মোডটি নির্ধারণ করুন

CSS অ্যানিমেশনটি প্রথম কীয়ারফ্রেম পরিচালনা করা হওয়ার আগে বা শেষতম কীয়ারফ্রেম পরিচালনা করা হওয়ার পরে ইলেক্ট্রনিকেলকে প্রভাবিত করবে না。animation-fill-mode এই প্রক্রিয়াটি এই আচরণকে অবরূপ করতে পারে。

অ্যানিমেশনটি না পরিচালনা করার সময় (শুরুর আগে, শেষের পরে, বা উভয়কেই শেষ হওয়ার পরে),animation-fill-mode এই প্রক্রিয়াটি লক্ষ্য ইলেক্ট্রনিকেলটির স্টাইল ভ্যালু নির্ধারণ করে。

animation-fill-mode প্রক্রিয়াটি নিম্নলিখিত ভ্যালুস স্বীকার করতে পারে:

  • none - ডিফল্ট ভ্যালু।অ্যানিমেশনটি কার্যকর হওয়ার আগে বা পরের ইলেক্ট্রনিকেলকে কোনও স্টাইল ভ্যালু প্রয়োগ করবে না।
  • forwards - ইলেক্ট্রনিকেলটি শেষতম কীয়ারফ্রেম দ্বারা সংজ্ঞায়িত স্টাইল ভ্যালুসকে রাখবে (animation-direction এবং animation-iteration-count নির্ভর করে)।
  • backwards - ইলেক্ট্রনিকেলটি প্রথম কীয়ারফ্রেম দ্বারা সংজ্ঞায়িত স্টাইল ভ্যালুস পাবে (animation-direction নির্ভর করে), এবং অ্যানিমেশন এলাকাকালীন এই ভ্যালুসকে রাখবে।
  • both - অ্যানিমেশনটি একইসঙ্গে এগিয়ে এবং পিছনের নিয়মগুলি মেনে চলে, তারফক্তে অ্যানিমেশন প্রক্রিয়াটির স্টাইল গুণগুলি দুই দিকেই সম্প্রসারিত করে।

এই উদাহরণটি ব্যবহার করে <div> ইলেক্ট্রনিকেলটিকে অ্যানিমেশন শেষ হওয়ার পরেও শেষতম কীয়ারফ্রেম থেকে স্টাইল ভ্যালুস রাখে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

স্বয়ং প্রয়োগ করুন

নিচের উদাহরণটিতে <div> এলিমেন্টটি অ্যানিমেশন শুরুর আগে (অ্যানিমেশন বিলম্বের সময়) প্রথম কীমট স্টাইল ভালো নিয়েছে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

স্বয়ং প্রয়োগ করুন

নিচের উদাহরণটিতে <div> এলিমেন্টটি অ্যানিমেশন শুরুর আগে প্রথম কীমট স্টাইল ভালো নিয়েছে এবং অ্যানিমেশন শেষের কীমট স্টাইল রাখছে:

উদাহরণ

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

স্বয়ং প্রয়োগ করুন

অ্যানিমেশন সংক্ষিপ্ত প্রতিশব্দ

নিচের উদাহরণটিতে ছয়টি অ্যানিমেশন প্রতিশব্দ প্রয়োগ করা হল:

উদাহরণ

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

স্বয়ং প্রয়োগ করুন

সংক্ষিপ্ত প্রয়োগ করে animation প্রতিশব্দটি প্রয়োগ করেও উপরোক্ত উদাহরণের মতো অ্যানিমেশন প্রভাব পাওয়া যাবে:

উদাহরণ

div {
  animation: example 5s linear 2s infinite alternate;
}

স্বয়ং প্রয়োগ করুন

CSS অ্যানিমেশন প্রতিশব্দ

নিচের টাবলে @keyframes নিয়ম এবং সকল CSS অ্যানিমেশন প্রতিশব্দকে তালিকাভুক্ত করা হল

প্রতিশব্দ বর্ণনা
@keyframes অ্যানিমেশন মোডটি নির্দিষ্ট করুন
animation সকল অ্যানিমেশন প্রতিশব্দের সংক্ষিপ্ত প্রতিশব্দ সেট করুন
animation-delay অ্যানিমেশনটি শুরু করার জন্য বিলম্ব নির্দিষ্ট করুন
animation-direction অ্যানিমেশনটি আগে থেকে প্লে করা হবে, পরে থেকে প্লে করা হবে বা মধ্যবর্তীভাবে প্লে করা হবে
animation-duration অ্যানিমেশনটি একটি চক্র সম্পন্ন করতে সময় নির্দিষ্ট করুন
animation-fill-mode অ্যানিমেশনটি নিঃপ্লে থাকাকালীন এলিমেন্টের স্টাইল (শুরুর আগে, শেষে, বা উভয়ই)
animation-iteration-count অ্যানিমেশনটি প্লে করা হবের সংখ্যা নির্দিষ্ট করুন
animation-name নির্দিষ্ট @keyframes অ্যানিমেশনের নাম
animation-play-state এনিমেশনকে চলানো বা স্থগিত করার নির্ধারণ করুন
animation-timing-function এনিমেশনের গতিপথ নির্ধারণ করুন