در این مطلب قصد داریم تا یکی دیگر از خاصیت های موجود در زبان برنامه نویسی CSS3 را برای شما بررسی کنیم .دانستن و به کار بردن این خواص می تواند برای شما امکانات جالبی را فراهم آورد.در این آموزش می پردازیم به :
خاصیت animation-timing-function :
خاصیت animation-timing-function ، نحوه و سرعت اجرای انیمیشن را در طی فرآیند آن تعیین می کند .
از این خاصیت می توان برای دادن یک جلوه تصویری به انیمیشن استفاده کرد . برای مثال انیمیشن در هنگام اجرا ، آهسته شروع شده و سپس سرعتش تا پایان آن افزایش یابد .
شکل کلی استفاده از این خاصیت به صورت زیر است :
;Syntax: animation-timing-function: value
پارامتر value در این خاصیت می تواند یکی از مقادیر زیر را داشته باشد :
انواع مقادیر پارامتر value :
linear:
در این حالت سرعت اجرای انیمیشن در تمام طول فرآیند آن یکسان است .
ease:
در این حالت انیمیشن با سرعت کم آغاز شده ، در میانه فرآیند سرعتش زیاد شده و سپس با سرعت کم پایان می یابد .
این مقدار پیش فرض برای پارامتر value است .
. ease-in:
انیمیشن در ابتدا با سرعت کم شروع شده و سپس سرعتش زیاد می شود
ease-out:
انیمیشن در ابتدا با سرعت زیاد شروع شده و سپس سرعتش در انتها کم می شود .
. ease-in-out :
نیمیشن در ابتدا و انتها دارای سرعت کم است
پشتیانی در مرورگر های مختلف :
اکثر مرورگر های مطرح به جز نابغه معروف (IE)به صورت عادی از این خاصیت پشتیانی می کنند .
