5
تشکر

شرح تابع های خاصیت transition

همانطور که میدانید خاصیت transition دارای تایع های مختلفی به نام های ease, ease-in, ease-out ease-in-out, linear و cubic-bezier است.
در این مطلب به شرح چگونگی کار این تابع ها میپردازیم.

 


تابع ease

شرح تابع های خاصیت transition

شرح تابع های خاصیت transition

transition-timing-function: ease;

این تابع همانطور که میبینید ابتدا دارای سرعت کم و سپس به مرور سرعت خود را زیاد میکند که در صورت انتخاب نکردن تابع برای transition این تابع به صورت پیشفرض انتخاب میشود.

 


تابع linear

شرح تابع های خاصیت transition

شرح تابع های خاصیت transition

transition-timing-function: linear;

این تابع مانند شکل به صورت خطی کار میکند.

 


تابع ease-in

شرح تابع های خاصیت transition

شرح تابع های خاصیت transition

transition-timing-function: ease-in;

این تابع در پایان انیمیشن سرعت خود را زیاد میکند.

 


تابع ease-out

شرح تابع های خاصیت transition

شرح تابع های خاصیت transition

transition-timing-function: ease-out;

این تابع در ابتدای انیمشین دارای سرعت بیشتری نسبت به ابتدای آن است و برعکس ease-in است.

 


تابع ease-in-out

شرح تابع های خاصیت transition

شرح تابع های خاصیت transition

transition-timing-function: ease-in-out;

این تابع هم تقریبا مانند تابع ease است.

 


تابع cubic-bezier

شرح تابع های خاصیت transition

شرح تابع های خاصیت transition

transition-timing-function:cubic-bezier(0.950, 0.050, 0.795, 0.035)

توسط کاربر زمان بندی میشود و چهار خصوصیت میگیرد.

 

مشاهده دمو: شرح تابع های خاصیت transition

  • rahaamirchermahini می‌گه:

    با زهم سلام
    و اگه برای شما مقدوره از اینجا سلام من رو هم به اقامون علی ابن موسی الرضا برسانید
    میخواستم خواهش کنم
    اگه امکان داره در مورد اسلاید شو هم در css3 یه اموزش نسبتا روان بنوسین منظورم بیشتر روی ساخت اسلاید شوی هستش که همانند بنرهای فلش کار میکنه و امکان انتخاب اسلاید رو با علامت های next و previous به کاربر رو میده

    با تقدیر وتشکر از شما برادر بزرگوارم
    شاد وپیروز باشید


  • نظرات این مطلب بسته است.