مثال (خصوصیت transition-timing-function)

انجام یک انتقال سرعت مشابه از شروع تا خاتمه:

transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 10، Firefox، Chrome و Opera، خصوصیت transition-timing-function را پشتیبانی می کنند.

Safari از خصوصیت جایگزین webkit-transition-timing-function  استفاده می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، تنظیم transition-timing-function را پشتیبانی نمی کند.

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

با استفاده از خصوصیت transition-timing-function می توان سرعت منحنی انتقال را مشخص کرد.

این ویژگی، در واقع اجازه می دهد، اثر انتقال با سرعت های مختلفی در مدت زمان انتقال انجام گیرد.

مقدار پیشفرض ease
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.transitionTimingFunction="linear"

نحوه استفاده

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
مقدار توضیحات
linear

انتقالی با سرعت مشابه از شروع تا خاتمه را مشخص می کند.
ease

انتقالی را مشخص می کند که ابتدا با سرعت کند آغاز می شود، سپس سریعتر می شود، در نهایت با سرعتی کند، خاتمه می یابد.
ease-in

انتقالی را مشخص می کند که با سرعت کند شروع می شود.
ease-out

انتقالی را مشخص می کند که با سرعت کندی خاتمه می یابد.
ease-in-out

انتقالی را مشخص می کند که دارای شروع و خاتمه کند می باشد.
cubic-bezier(n,n,n,n)

در این تابع شما می توانید مقادیر دلخوه خود را جایگذاری کند. مقادیر ممکن به جای n مقادیربین صفر و یک هستند

نکته: مقادیر ممکن در مثال های زیر را امتحان کنید تا درک بهتری از نحوه کار داشته باشید.

مثالs

مثال - خودتان امتحان کنید

مثال (خصوصیت transition-timing-function)

برای درک بهتر مقادیر ممکن برای تابع: در این مثال 5 عنصر div مختلف با 5 مقدار متفاوت آورده شده است:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
خودتان امتحان کنید »

مثال (خصوصیت transition-timing-function)

مشابه مثال بالا، با این تفاوت که از تابع cubic-bezier استفاده شده است:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
خودتان امتحان کنید »