سلام خدمت همگی

همون طور که میدونید step یعنی گام و خب توی css هم دقیقا همین کارو میاد برامون انجام میده 

یعنی زمان یک ترنزیشن رو میاد به تعداد گامی که ما تعیین کردیم تقسیم میکنه و انجامش میده حالا انواع مختلفی داره که بررسیش میکنیم 

transition-timing-function: steps(5, start)

این یعنی زمان ترنزیشن مارو به 5 قسمت تقسیم کن و دقیقا از شروع فاصله ی زمانی شروع به تغییر کن 

حالا این یعنی چی ؟ 

فرض کنید زمان ما 5 ثانیه اس و ماهم استپ رو روی 5 گذاشتیم این یعنی هر یک ثانیه مثلا یک گام به سمت راست حرکت کنه , حالا ویژگی دوم که استارت هست یعنی از همون اول شروع به شمارش کن پس گام اول ما میشه ثانیه ی صفر و گام دوم میشه ثانیه ی 1 الی اخر 

transition-timing-function: steps(5, end)

حالا فرق این با بالایی اینجاست که end باعث میشه تغییرات در اخر یک فاصله ی زمانی اتفاق بیفته 

یعنی اینجا اولین گام ما میشه اخره ثانیه ی 1 دومین گام اخر ثانیه ی 2 الی اخر 

transition-timing-function: step-start;

این خط با (steps (1,start برابره , باعث میشه ترنزیشن یهو به حالت اخر برسه و تا پایان زمان همونجا بمونه 

transition-timing-function: step-end;

این خط هم با (steps (1,end برابره و باعث میشه ترنزیشن تا اخر زمان اعمال نشه و در پایان زمان ناگهانی اعمال میشه 

امیدوارم خوب و قابل فهم توضیح داده باشم :)