خصوصیت 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);}
خودتان امتحان کنید »
