خصوصیت 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);}
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 7881
دیدگاه‌ها
سلام
تابع cubic-bezier رو متوجه نشدم لظفا توضیح میدین؟به سایتی که لینکشو گذاشتین رفتم ولی متوجه نشدم!!ممنونم
سلام. به این سایت بروید cubic-bezier.com/ و بعد از مشخص کردن نوع منحنی، روی دکمه Go بزنید. میتوانید از کتابخانه زیر عناصر متحرک صورتی و آبی، یک مورد را انتخاب کنید تا عنصر آبی، به آن شکل حرکت کند. حرکت عنصر صورتی را شما مشخص می کنید و حرکت عنصر آبی را، شما توسط کتابخانه زیر آن مشخص می کنید. برای مشخص کردن منحنی حرکت عنصر صورتی، میتوانید هر جا که خواستید، روی منحنی بزرگ و اصلی ضربه بزنید تا نقطه های متحرک آبی و صورتی روی صفحه دارای منحنی حرکت کنند، منحنی خود را درست می کنید و روی Goضربه می زنید. میتوانید با گزینه Input یک کد منحنی را با فرمت زیر وارد کنید:
{"your-name":"n, n, n, n"}
اینگونه خودتان یک عنصر ثابت به کتابخانه سایت اضافه می کنید. همچنین با گزینه Export کد عناصر موجود در کتابخانه را می تواند ببینید. با گزینه Save میتوانید منحنی که بصورت دستی با دو نقطه آبی و صورتی ایجاد کردید را در کتابخانه بصورت مستقیم ذخیره کنید؛
با تشکر.
سلام، به لینک زیر برید و بعد از مشخص کردن پارامترهای تابع cubic-bezier روی دکمه Go کلیک کنید:
cubic-bezier.com/
سلام.
در مورد cubic-bezier نتونستم سر در بیارم اعدادش براساس چی نوشته میشوند و هر کدوم چی رو مشخص میکنند.
ممنون
سلام به سایت زیر مراجعه کنید:
cubic-bezier.com
عالی بود.