پیشنهاد درس:
- صفحه قبلی توابع sqrt() CSS
- صفحه بعدی توابع tan() CSS
- برگشت به لایه بالاتر دستورالعمل مرجع توابع CSS
функشنامه 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 |
اختیاری. زمان وقوع پرش بین مقادیر مشخص میشود. از یکی از کلیدواژههای زیر استفاده کنید:
|
جزئیات فنی
نسخه: | CSS Easing Functions Level 1 |
---|
پشتیبانی مرورگر
تعداد در جدول نشاندهنده نسخهای است که اولین بار از این عملکرد پشتیبانی میکند.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
77 | 79 | 65 | 14 | 64 |
صفحات مرتبط
مراجعه:خصوصیت animation CSS
- صفحه قبلی توابع sqrt() CSS
- صفحه بعدی توابع tan() CSS
- برگشت به لایه بالاتر دستورالعمل مرجع توابع CSS