وظيفة CSS steps()

التعريف والاستخدام

CSS steps() تستخدم الوظيفة لإنشاء وظائف حسابية خطوة بخطوة للرسوم المتحركة.

تقسم هذه الوظيفة وقت الحركة إلى فترات متساوية من عدد المشاركات المحددة (n). على سبيل المثال: إذا كان n 4، فإنها تقسم الحركة إلى أربعة أجزاء. تقسم الزمن من 0% إلى 100% إلى أربعة أجزاء؛ وهي 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

المرجع:خصائص timing-function لـ animation لـ CSS