CSS এনিমেশন

CSS এনিমেশন

CSS HTML ইলেকট্রনিকেলের অ্যানিমেশন প্রভাব করতে পারে, যেমনই JavaScript বা Flash ব্যবহার করতে হয়না。

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> ইলেকট্রনিকেলের পটভূমির রঙ "red" থেকে "yellow"-এ ক্রমবর্ধমানভাবে পরিবর্তন করবে:

উদাহরণ

/* অ্যানিমেশন কোড */
@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% পর্যন্ত কর্মকাণ্ড সমাপ্ত হলে, <div> ইলেকট্রনিকেলের পটভূমির রঙ পরিবর্তন করবে:

উদাহরণ

/* অ্যানিমেশন কোড */
@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 এনিমেশনের গতি কার্নেশন নির্ধারণ করে