خاصیت animation-timing-function در CSS

یک نمونه ساده از خاصیت animation-timing-function:

animation-timing-function: linear;

آزمایشگاه

تعریف و کاربرد

خاصیت animation-timing-function سرعت منحنی یک انیمیشن را تعیین می کند.

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

#	توضیحات
مقدار پیشفرض	آسان
ارث بری	خیر
انیمیشن	خیر
نسخه	CSS3
نگارش JS	object.style.animationTimingFunction="linear"

اعدادی که در فیلد های مرورگر ها درج شده اند، بیانگر ورژن ساپورت کننده خاصیت animation-timing-function هستند.

#	کروم	ادج	فایرفاکس	سافاری	اپرا
animation-timing-function

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

مقادیر	توضیحات
linear	سرعت حرکت انیمیشن از ابتدا تا انتها یکنواخت است.
ease	سرعت انیمیشن به 3 پخش تقسیم می شود: بخش اول: شروع آهسته. بخش دوم: ادامه ای سریع. بخش سوم: پایانی آهسته.
ease-in	انیمیشن به کندی شروع به اجرا شدن می کند.
ease-out	انیمیشن به کندی پایان می یابد.
ease-in-out	انیمیشن شروع و پایان کندی خواهد داشت.
step-start	معادل مراحل (1، شروع)
step-end	معادل مراحل (1، پایان)
steps(int,start\|end)
cubic-bezier(n,n,n,n)	مقادیر بین 0 و 1 می باشند.
initial	این مقدار را به ویژگی پیش فرض خود اضافه می کند.
inherit	این مقدار را از تگ والد خود به ارث می برد.

آموزش CSS: انیمیشن‌های CSS

مرجع HTML DOM: ویژگی animationTimingFunction

CSS Reference

مرجع CSS

خاصیت های CSS