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