پیشنهاد درس:

функشنامه steps() در CSS

تعریف و استفاده از 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 Firefox Safari Opera
77 79 65 14 64

صفحات مرتبط

مراجعه:خصوصیت animation CSS

مراجعه:خصوصیت animation-timing-function CSS