شیوه زمان بندی انیمشین

در زمان تعریف keyframes ما میتوانیم از from برای تعریف شرایط شروع انیمیشن و از to برای شرایط پایان انیمیشن استفاده کنیم، وقتی از from و to استفاده می کنیم وابسته به مدت زمان تعیین شده، مرورگر به صورت خودکار زمان را طوری تنظیم میکند که از حالت from تا به حالت to در مدت زمان تعریف شده اجرا شود.
بجای from و to ما میتوانیم از % نیز استفاده کنیم. مقدار ۰% شروع انیمیشن و مقدار ۱۰۰% پایان انیمشین را تعیین میکند.
در هنگام استفاده از % ما می توانیم مراحل انمیشین را به ۱۰۰ قسمت تقسیم کنیم، و در هر قسمت کدهای مورد نظرمان را قرار دهیم
مثال :

so

به مثال زیر دقت کنید

aa