توضیحات
دسته: مقالات آموزشی

در این مقاله قصد داریم به بررسی یکی از قابلیت های جذاب CSS3، که به طراح وب اجازه می هد تا با استفاده از آن ویژگی های یک المان را به تدریج و طی زمان یا مدت مشخص تغییر دهد،بپردازیم. در همین راستا ابتدا به تعریف transition در CSS می پردازیم و سپس به بررسی خاصیت های آن خواهیم پرداخت.

تعریف transition در CSS3

transition عامل اصلی در افکت های css3 هست بدون این خاصیت قادر به اجرای هیچ افکتی در CSS نیستیم.

برای ساختن افکت transition دو چیز را باید مشخص کنید:

  1. Selector یا المانی که می خواهید پروپرتی را به آن بدهید.
  2. مدت زمانی که افکت طول می کشد.

نکته: درصورتی که مدت زمان انجام transition مشخص نشده باشد، transition هیچ اثری بر روی آن المان ندارد، زیرا مدت انجام transition به صورت پیشفرض 0 است.

مثال1: یک افکت transition به هر دو خاصیت width و height اضافه شد که به مدت 2 ثانیه برای width و چهار ثانیه برای height طول می کشد .

خاصیت هایtransition :

  1. transition : تمامی خاصیت های transition را در یک خاصیت واحد تنظیم و مقدار دهی می کند.
  2. trtransition-timing-function : این خاصیت نمودار سرعت transition را مشخص می کند. (نحوه و سرعت اجرای انیمیشن را تعریف می کند.) این خاصیت می تواند یکی از مقادیر زیر را داشته باشد:
    • ease: این مقدار باعث می شود transition به آرامی شروع شود و سپس تند شود و در نهایت به آرامی پایان می یابد (حالت پیش فرض خاصیت مورد نظر)
    • Linear: این مقدار باعث می شود که transition با سرعتی یکسان آغاز و پایان یابد.
    • ease-in: این مقدار باعث می شود که transition با سرعتی آرام آغاز شود.
    • ease-out این مقدار باعث می شود که transition با سرعتی آرام پایان یابد.
    • ease-in-out: این مقدار باعث می شود که transition با سرعتی آرام آغاز و پایان یابد.
    • cubic-bezier(n,n,n,n): این مقدار به شما امکان می دهد که مقادیر خود را در تابع cubic-bezier وارد کنید.

    مثال2: نمودارهای سرعت مختلف در transition

  3. transition-delay : مشخص می کند که بعد از چه مدت زمانی transition، شروع شود. مقدار پیشفرض آن 0 است. Div6 در مثال 2 این امر را نشان می دهد.
  4. transition-duration : مدت زمانی که طول می کشد (ثانیه یا هزارم ثانیه) تا transition به اتمام برسد را تعیین می کند.
  5. transition-property : خاصیتی است که در طی پروسه ی انیمیشن در المان از یک مقدار اولیه به مقدار ثانویه تغییر خواهد کرد.
توجه:

می توان خاصیت transition را به صورت مجزا مقدار دهی کرد به صورت زیر:


  div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

یا همه ی آنها را با هم و در یک خط تعریف کرد به صورت زیر:


  div {
transition: width 2s linear 1s;
}

منابع

https://www.w3schools.com/css/css3_transitions.asp

https://codepen.io/tanhaee/pen/PXYMRY

https://codepen.io/tanhaee/pen/zyOPaK