سبد (0)

تبلیغات

خصوصیت transition-timing-function

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

دیدگاه‌ها  

0 # Guest 1396-07-15 09:50
سلام
تابع cubic-bezier رو متوجه نشدم لظفا توضیح میدین؟به سایتی که لینکشو گذاشتین رفتم ولی متوجه نشدم!!ممنونم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # mhs 1398-06-09 21:56
سلام. به این سایت بروید cubic-bezier.com/ و بعد از مشخص کردن نوع منحنی، روی دکمه Go بزنید. میتوانید از کتابخانه زیر عناصر متحرک صورتی و آبی، یک مورد را انتخاب کنید تا عنصر آبی، به آن شکل حرکت کند. حرکت عنصر صورتی را شما مشخص می کنید و حرکت عنصر آبی را، شما توسط کتابخانه زیر آن مشخص می کنید. برای مشخص کردن منحنی حرکت عنصر صورتی، میتوانید هر جا که خواستید، روی منحنی بزرگ و اصلی ضربه بزنید تا نقطه های متحرک آبی و صورتی روی صفحه دارای منحنی حرکت کنند، منحنی خود را درست می کنید و روی Goضربه می زنید. میتوانید با گزینه Input یک کد منحنی را با فرمت زیر وارد کنید:
{"your-name":"n, n, n, n"}

اینگونه خودتان یک عنصر ثابت به کتابخانه سایت اضافه می کنید. همچنین با گزینه Export کد عناصر موجود در کتابخانه را می تواند ببینید. با گزینه Save میتوانید منحنی که بصورت دستی با دو نقطه آبی و صورتی ایجاد کردید را در کتابخانه بصورت مستقیم ذخیره کنید؛

با تشکر.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-07-15 13:41
سلام، به لینک زیر برید و بعد از مشخص کردن پارامترهای تابع cubic-bezier روی دکمه Go کلیک کنید:
cubic-bezier.com/
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مهدی دلاور 1395-11-15 19:54
سلام.
در مورد cubic-bezier نتونستم سر در بیارم اعدادش براساس چی نوشته میشوند و هر کدوم چی رو مشخص میکنند.
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1395-11-16 19:04
سلام به سایت زیر مراجعه کنید:
cubic-bezier.com
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # dada 1395-07-08 19:42
عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی