خصوصیت transition-timing-function

مثال

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

		transition-timing-function: linear;

		-webkit-transition-timing-function: linear; /* Safari and Chrome */

خودتان امتحان کنید »

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

مرورگرهای 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 مقادیربین صفر و یک هستند.

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

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

مثال

برای درک بهتر مقادیر ممکن برای تابع: در این مثال 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;}

خودتان امتحان کنید »

مثال

مشابه مثال بالا، با این تفاوت که از تابع 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);}

خودتان امتحان کنید »

لینک های اصلی

مرجع CSS

خصوصیت transition-timing-function

مثال

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

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

نحوه استفاده

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

مثال

مثال

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.