CSS — ترنزیشن ها (CSS Transitions)

آخرین بروزرسانی: 1404/07/19

قبلی: تبدیل های سه بعدی (CSS 3D Transforms) بعدی: انیمیشن ها (CSS Animations)

ترنزیشن های CSS (CSS Transitions)

«ترنزیشن های CSS» تغییرِ نرم مقادیر ویژگی ها را در یک بازه زمانی ممکن می کند. بنابراین با تعیین ویژگی هدف و مدت زمان، می توانید گذارهای دل نشین بسازید.

ویژگی shorthand ترنزیشن های CSS

ویژگی transition میان بری برای این چهار جزء است: transition-property، transition-duration، transition-timing-function و transition-delay.

نمونه پایه

در این مثال، پهنای یک <div> طی 2 ثانیه تغییر می کند:

div { width: 100px; height: 100px; background-color: red; transition: width 2s; }

نحوه تحریک ترنزیشن های CSS

ترنزیشن هنگام تغییر مقدار ویژگی اجرا می شود؛ معمولاً در شبه کلاس هایی مانند :hover، :active، :focus یا :checked.

div:hover { width: 300px; }

نکته: با خروج نشانگر، مقدار به تدریج به حالت اولیه بازمی گردد.

تغییر چند ویژگی با ترنزیشن های CSS

می توانید چند ویژگی را با ویرگول جدا کنید و برای هرکدام مدت متفاوت بدهید:

div { transition: width 2s, height 4s, background-color 3s; }

تابع زمان بندی در ترنزیشن های CSS

ویژگی transition-timing-function منحنی سرعت را مشخص می کند؛ مقادیر رایج: ease، linear، ease-in، ease-out، ease-in-out یا تابع cubic-bezier(n,n,n,n).

#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; }

تأخیر در ترنزیشن های CSS

با transition-delay می توان تأخیر شروع را بر حسب s یا ms تعیین کرد:

div { transition-delay: 1s; }

ترنزیشن + ترنسفورم

می توان چند ویژگی از جمله transform را همزمان گذار داد:

div { transition: width 2s, height 2s, background-color 2s, transform 2s; }

نمونه برای دکمه

button { transition: background-color 1s ease-out, transform 1s ease-out; }

نوشتن مفصل یا خلاصه ترنزیشن های CSS

می توانید هر جزء را جداگانه بنویسید یا از میان بر استفاده کنید:

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

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

هشدار: استفاده از مدت های طولانی یا منحنی های نامناسب می تواند حس کندی ایجاد کند.

مطالب مرتبط: تبدیل های سه بعدی CSS و انیمیشن های CSS.