در حال بارگذاری...

گذارها (Transitions) در CSS

سایه جعبه به صفحه عمق داد. ترنزیشن به تغییرها زمان می‌دهد: پس‌زمینهٔ دکمه روی هاور نرم عوض می‌شود، کارت کمی بالا می‌آید، رنگ لینک به‌جای پرش ناگهانی آرام جابه‌جا می‌شود. هنوز دو حالت می‌نویسید؛ مرورگر بینشان برای مدتی که شما تعیین می‌کنید درونیابی می‌کند.

ترنزیشن چیست؟

ترنزیشن به‌تنهایی ظاهر تازه اختراع نمی‌کند. وقتی ویژگی‌ای از قبل عوض می‌شود (معمولاً با :hover، :focus-visible یا یک کلاس)، همان تغییر را در طول زمان نرم می‌کند. بدون ترنزیشن پرش آنی است؛ با ترنزیشن یک سر خوردن کوتاه و خوانا می‌گیرید.

چهار ویژگی بلند این‌هاست: transition-property، transition-duration، transition-timing-function و transition-delay. در کار روزمره بیشتر وقت‌ها از مختصرنویسی transition استفاده می‌کنید.

ویژگی و مدت

بگویید چه چیزی اجازه دارد حرکت کند و تغییر چقدر طول بکشد. مدت را با زمان می‌نویسید (0.2s یا 200ms). کوتاه و هدفمند بهتر از انتظار نمایشی است — بازخورد رابط کاربری اغلب حدود 150ms تا 300ms حس خوبی می‌دهد.

پس‌زمینهٔ نرم دکمه روی هاور

css

.btn {
background: #2563eb;
color: #fff;
border: none;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
transition-property: background-color, color;
transition-duration: 0.2s;
}

.btn:hover {
background: #1d4ed8;
color: #f8fafc;
}

ترنزیشن را روی قانون پایه بگذارید تا هم ورود به هاور و هم خروج از آن انیمیت شود. فقط همان ویژگی‌هایی را فهرست کنید که واقعاً می‌خواهید؛ وگرنه پرش‌های ناخواستهٔ چیدمان هم نیم‌ثانیه روی صفحه می‌لغزند.

منحنی سرعت و تأخیر

transition-timing-function شکل سرعت را می‌سازد: ease (حس پیش‌فرض)، linear، ease-in، ease-out، ease-in-out یا cubic-bezier(...) سفارشی. transition-delay قبل از شروع تغییر صبر می‌کند — برای منوی پلکانی مفید است، روی یک دکمهٔ تنها آسان است زیاده‌روی کنید.

ease-out در برابر linear روی opacity

css

.fade-panel {
opacity: 0.65;
transition: opacity 0.35s ease-out;
}

.fade-panel.is-bright {
opacity: 1;
}

.meter-bar {
width: 40%;
transition: width 0.4s linear;
}

.meter-bar.is-full {
width: 100%;
}

برای ظاهر شدن UI اغلب ease-out طبیعی‌تر است. linear برای پیشرفتی که باید یکنواخت خوانده شود مناسب‌تر است. تأخیر را برای توالی عمدی نگه دارید — نه برای اینکه هر کلیک دیر حس شود.

مختصرنویسی و چند ویژگی با هم

ترتیب رایج در مختصرنویسی معمولاً این است: ویژگی، مدت، منحنی سرعت، تأخیر. چند ترنزیشن را با ویرگول جدا کنید. ویژگی‌های دوست‌دار رنگ‌آمیزی — مثل transform و opacity — معمولاً نرم‌تر از انیمیت کردن width، height، top یا margin هستند.

بالا آمدن با transform و سایه روی هاور

css

.card-lift {
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.card-lift:hover,
.card-lift:focus-visible {
transform: translateY(-0.25rem);
box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.14);
}

اینجا عمق جلسهٔ قبل با حرکت یکی می‌شود: سایه و بالا آمدن در یک لحظهٔ هاور همراه می‌شوند. جابه‌جایی را کوچک نگه دارید تا صفحه هنوز محکم حس شود.

حرکت کمتر، و کی سراغ انیمیشن برویم

بعضی کاربران حرکت کمتر می‌خواهند. با prefers-reduced-motion: reduce ترنزیشن‌های غیرضروری را کوتاه یا خاموش کنید. ترنزیشن برای تغییر حالت از الف به ب عالی است. داستان‌های حلقه‌ای یا چندمرحله‌ای مال انیمیشن‌های CSS (@keyframes) است — بعد از Transforms در همین ماژول.

خودتان امتحان کنید

به دکمه ترنزیشن 0.2s برای پس‌زمینه بدهید و هاور کنید؛ بعد transition را از :hover به قانون پایه منتقل کنید و رفتار خروج از هاور را مقایسه کنید.
با کلاس، opacity یک پنل را با ease-out انیمیت کنید؛ بعد linear را امتحان کنید و حس را بسنجید.
روی هاور کارت، transform: translateY(...) را با box-shadow نرم‌تر ترکیب کنید (دو ویژگی در یک لیست مختصرنویسی).
در DevTools حالت prefers-reduced-motion: reduce را شبیه‌سازی کنید و ببینید حرکت غیرضروری عقب می‌نشیند.
در این تمرین از انیمیت کردن height برای منوی باز صرف‌نظر کنید — آن الگو را بعداً جدا تمرین کنید.

اشتباه‌های رایج

نوشتن transition: all 1s تا هر ویژگی، حتی چیدمان، یک ثانیه کامل بلغزد
مدت‌های چندثانیه‌ای که رابط را کند حس می‌کنند
انیمیت width / top / margin وقتی transform یا opacity کافی است
نادیده گرفتن prefers-reduced-motion
انتظار حلقهٔ بی‌پایان از ترنزیشن — آن کار انیمیشن است

جمع‌بندی

ترنزیشن تغییر ویژگی بین دو حالت را در طول زمان نرم می‌کند
ویژگی، مدت، منحنی سرعت و تأخیر را کنترل کنید (یا از مختصرنویسی transition استفاده کنید)
حرکت کوتاه روی ویژگی‌های دوست‌دار رنگ‌آمیزی؛ ترنزیشن را روی قانون پایه بگذارید
ترجیح حرکت کمتر را رعایت کنید؛ برای حلقه و توالی پیچیده سراغ keyframes بروید
بعدی در Effects & Motion: Transforms

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان