CSS steps() ফাংশন

সংজ্ঞা ও ব্যবহার

CSS-এর steps() ফাংশনটি অ্যানিমেশনের পদক্ষেপ সময়কাল সৃষ্টির জন্য ব্যবহৃত হয়

এই ফাংশন অ্যানিমেশন সময়কে নির্দিষ্ট সংখ্যক (n) সমান কালীন সময়কালে ভাগ করে। উদাহরণস্বরূপ: যদি n 4 হয়, তবে অ্যানিমেশন 4 অংশে ভাগ করা হবে। এটি 0% থেকে 100% সময়কালকে 4 অংশে ভাগ করবে; যথাক্রমে 0%-25%、25%-50%、50%-75% এবং 75%-100%。

উদাহরণ

অ্যানিমেশনের বিভিন্ন পদক্ষেপ সময়কাল সৃষ্টি করুন:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

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

CSS সংজ্ঞা

steps(n, step-position)
মান বর্ণনা
n বাধ্যতামূলক। পদক্ষেপ/সময়সীমা নির্দিষ্ট করুন
step-position

বাধ্যতামূলক নয়। বলা হয় যে কোনো মানের মধ্যে সময় কতটা হবে। নিম্নলিখিত কোনো একটি শব্দকে ব্যবহার করুন:

  • jump-start বা start: অ্যানিমেশন শুরু হওয়ার সময় প্রথম পদক্ষেপ হয়
  • jump-end বা end: অ্যানিমেশন শেষ হওয়ার সময় শেষ পদক্ষেপ হয়।end ডিফল্ট মান
  • jump-none: কোনো প্রক্রিয়াকরণ এবং স্থায়ীত্ব হবে না
  • jump-both: একইসঙ্গে প্রক্রিয়াকরণ এবং স্থায়ীত্ব হয়

প্রযুক্তিগত বিবরণ

সংস্করণ: CSS Easing Functions Level 1

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম এই ফাংশনটি সম্পূর্ণরূপে সমর্থনকারী ব্রাউজার সংস্করণটির জন্য বলা হয়。

Chrome Edge ফায়ারফক্স স্যাফারি অপেরা
77 79 65 14 64

সংশ্লিষ্ট পৃষ্ঠা

উল্লেখ:คุณสมบัติ animation CSS

উল্লেখ:คุณสมบัติ animation-timing-function CSS