با سلام و احترام

در رابطه با تمرین این جلسه animaton-timing-function به دو صورت می‌تونه اعمال بشه. non-step مثل ease , ease-in , ease-out , ease-in-out که استاد توضیح دادند و یا به صورت step که در ادامه توضیح مختصری رو براتون میدم.

وقتی ما یک انیمیشن رو به صورت steps مقدار دهی میکنیم در واقع داریم مشخص میکنیم که انیمیشن در چند مرحله یا قدم به پایان برسه.

animation-timing-function: steps(6, jump-start);

همونطور که در کد بالا دیدید steps خودش یک تابع است که درونش به ترتیب تعداد step و jump term قرار میگیره.

jump term در واقع زمان اولین و آخرین قدم رو مشخص میکنه. jump-term‌ها به این صورت هستند

• jump-start اولین step در شروع انیمیشن انجام می‌شود.
• jump-end آخرین step در پایان انیمیشن انجام می‌شود.
• jump-both اولین و آخرین step به ترتیب در شروع و پایان انیمیشن انجام می‌شود.
• jump-none در شروع یا پایان انیمیشن هیچکدام از step‌ها انجام نمی‌شود.
• start برابر است با jump-start
• end برابر است با jump-end

همچنین در نطر داشته باشید که می‌توانید برای animaton-timing-function از مقادیر زیر هم استفاده کنید

• step-start
• step-end

animation-timing-function: step-start;
/*  steps(1, jump-start)برابر با */
animation-timing-function: step-end;
/*  steps(1, jump-end)برابر با */

لطفا ببخشید اگر بعضی قسمت‌ها کمی نامفهوم شد.

با تشکر فراوان