animation-fill-mode প্রপার্টি

animation-fill-mode প্রপার্টি অ্যানিমেশন শেষ হওয়ার পর কোন অবস্থানে থামবে তা সেট করে। ডিফল্টভাবে অ্যানিমেশনটি এর প্রারম্ভিক মানে ফিরে যায় এবং এটি খুব সুন্দর দেখায় না।

সিনট্যাক্স

cssসিলেক্টর {
  animation-fill-mode: backwards | forwards | both | none;
}

মানসমূহ

ডিফল্ট মান: none।

উদাহরণ . none মান

এই উদাহরণে, এলিমেন্টের জন্য margin-left 300px এ সেট করা হয়েছে, এবং অ্যানিমেশনের প্রথম ফ্রেমের জন্য - 0px এ। যেহেতু animation-delay কোন বিলম্ব নেই, তাই পৃষ্ঠা লোড হওয়ার পর এলিমেন্টটি 300px এ না থেকে 0px এ চলে যাবে।除此以外 অ্যানিমেশন শেষ হওয়ার পরে এটি লাফিয়ে প্রারম্ভিক মানে ফিরে যাবে:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: none;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ . none মান

এই উদাহরণে, এলিমেন্টের জন্য margin-left 300px এ সেট করা হয়েছে, এবং অ্যানিমেশনের প্রথম ফ্রেমের জন্য - 0px এ। এছাড়াও এলিমেন্টের জন্য animation-delay 3 সেকেন্ডে সেট করা হয়েছে, তাই এলিমেন্ট পৃষ্ঠা লোড হওয়ার পর 0px এ না গিয়ে 300px এ থাকবে, এবং অ্যানিমেশন শুরু হওয়ার পর 3 সেকেন্ড সেখানে দাঁড়িয়ে থাকবে তারপর লাফিয়ে 0px এ চলে যাবে - এবং অ্যানিমেশন সেখান থেকে শুরু হবে। 除此以外, অ্যানিমেশন শেষ হওয়ার পরে লাফিয়ে প্রারম্ভিক মানে ফিরে যাবে:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: none;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ . backwards মান

এই উদাহরণে, এলিমেন্টের জন্য margin-left 300px এ সেট করা হয়েছে, এবং অ্যানিমেশনের প্রথম ফ্রেমের জন্য - 0px এ। এছাড়াও এলিমেন্টের জন্য animation-fill-mode backwards মানে সেট করা হয়েছে, তাই এলিমেন্ট পৃষ্ঠা লোড হওয়ার পর 300px এ না থেকে 0px এ চলে যাবে, যেমনটি animation-fill-mode none মানের জন্য হয়।除此以外, অ্যানিমেশন শেষ হওয়ার পরে লাফিয়ে প্রারম্ভিক মানে ফিরে যাবে:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: backwards;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ . none মান এবং পুনরাবৃত্তির সংখ্যা 1

এই উদাহরণে, এলিমেন্টের জন্য margin-left 300px এ সেট করা হয়েছে, এবং অ্যানিমেশনের প্রথম ফ্রেমের জন্য - 0px এ। এছাড়াও এলিমেন্টের জন্য animation-delay 3 সেকেন্ডে সেট করা হয়েছে, তাই এলিমেন্ট পৃষ্ঠা লোড হওয়ার পর 0px এ না গিয়ে 300px এ থাকবে, এবং অ্যানিমেশন শুরু হওয়ার পর 3 সেকেন্ড সেখানে দাঁড়িয়ে থাকবে তারপর লাফিয়ে 0px এ চলে যাবে - এবং অ্যানিমেশন সেখান থেকে শুরু হবে। যেহেতু animation-fill-mode none মানে সেট করা হয়েছে, তাই অ্যানিমেশন চালানো শেষ হলে এলিমেন্টটি প্রারম্ভিক মানে ফিরে যাবে:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: none;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ . forwards মান এবং পুনরাবৃত্তির সংখ্যা 1

এই উদাহরণে animation-fill-mode forwards মানে সেট করা হয়েছে, এবং অ্যানিমেশন পুনরাবৃত্তির সংখ্যা - 1 এ। অ্যানিমেশন চালানো শেষ হলে এলিমেন্টটি যে অবস্থানে অ্যানিমেশন শেষ হয়েছিল সেখানে থাকবে, এবং প্রারম্ভিক বিন্দুতে ফিরে যাবে না।

除此以外, এলিমেন্টের জন্য margin-left 300px এ সেট করা হয়েছে, এবং অ্যানিমেশনের প্রথম ফ্রেমের জন্য - 0px এ। এছাড়াও এলিমেন্টের জন্য animation-delay 3 সেকেন্ডে সেট করা হয়েছে, তাই এলিমেন্ট পৃষ্ঠা লোড হওয়ার পর 0px এ না গিয়ে 300px এ থাকবে, এবং অ্যানিমেশন শুরু হওয়ার পর 3 সেকেন্ড সেখানে দাঁড়িয়ে থাকবে, তারপর লাফিয়ে 0px এ চলে যাবে - এবং অ্যানিমেশন সেখান থেকে শুরু হবে:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ . both মান এবং পুনরাবৃত্তির সংখ্যা 1

এই উদাহরণে animation-fill-mode both মানে সেট করা হয়েছে, এবং অ্যানিমেশন পুনরাবৃত্তির সংখ্যা - 1 এ। পৃষ্ঠা লোড হওয়ার পর এলিমেন্টটি অ্যানিমেশনের প্রথম ফ্রেমে দাঁড়িয়ে থাকবে (0px এ, 300px এ নয়), এবং অ্যানিমেশন চালানো শেষ হলে এলিমেন্টটি যে অবস্থানে অ্যানিমেশন শেষ হয়েছিল সেখানে থাকবে, এবং প্রারম্ভিক বিন্দুতে ফিরে যাবে না:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: both;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

আরও দেখুন