خصوصیت transition-timing-function
مثال (خصوصیت transition-timing-function)
انجام یک انتقال سرعت مشابه از شروع تا خاتمه:
-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" |
نحوه استفاده
مقدار | توضیحات |
---|---|
linear |
انتقالی با سرعت مشابه از شروع تا خاتمه را مشخص می کند. |
ease |
انتقالی را مشخص می کند که ابتدا با سرعت کند آغاز می شود، سپس سریعتر می شود، در نهایت با سرعتی کند، خاتمه می یابد. |
ease-in |
انتقالی را مشخص می کند که با سرعت کند شروع می شود. |
ease-out |
انتقالی را مشخص می کند که با سرعت کندی خاتمه می یابد. |
ease-in-out |
انتقالی را مشخص می کند که دارای شروع و خاتمه کند می باشد. |
cubic-bezier(n,n,n,n) |
در این تابع شما می توانید مقادیر دلخوه خود را جایگذاری کند. مقادیر ممکن به جای n مقادیربین صفر و یک هستند |
نکته: مقادیر ممکن در مثال های زیر را امتحان کنید تا درک بهتری از نحوه کار داشته باشید.
مثال - خودتان امتحان کنید
مثال (خصوصیت transition-timing-function)
برای درک بهتر مقادیر ممکن برای تابع: در این مثال 5 عنصر div مختلف با 5 مقدار متفاوت آورده شده است:
#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 استفاده شده است:
#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);}
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 7679