CSS Transitions
انتقال‌های CSS به شما امکان می‌دهند تغییرات ویژگی‌های CSS را در یک بازه زمانی مشخص به‌صورت انیمیشنی اجرا کنید و جلوه‌های نرم و روانی هنگام تغییر وضعیت عناصر ایجاد کنید (مانند هاور، فوکوس یا کلیک).
دستور پایه
selector {
transition: property duration timing-function delay;
}
property: ویژگی CSS که باید تغییر کند (مثلopacity،background-color،transform).duration: مدت زمان انیمیشن (مثلاً0.5s،200ms).timing-function: نحوه اجرای انیمیشن (ease،linear،ease-in،ease-out،ease-in-out،cubic-bezier).delay: مدت زمانی که قبل از شروع تغییرات صبر می‌کند.
مثال ساده
.button {
background-color: blue;
color: white;
padding: 10px 20px;
transition: background-color 0.3s ease-in-out, transform 0.3s ease;
}
.button:hover {
background-color: red;
transform: scale(1.1);
}
✅ در این مثال، وقتی کاربر نشانگر ماوس را روی دکمه ببرد، رنگ پس‌زمینه تغییر کرده و دکمه کمی بزرگ‌تر می‌شود.
انتقال چندین ویژگی
می‌توانید چند ویژگی را هم‌زمان تغییر دهید:
.box {
width: 100px;
height: 100px;
background: lightblue;
transition: width 0.5s ease, background 0.3s linear;
}
.box:hover {
width: 200px;
background: coral;
}
مقایسه شورت‌هند و لانگ‌هند
✅ شورت‌هند (حالت کوتاه‌نویسی):
div {
transition: all 0.5s ease;
}
✅ لانگ‌هند (حالت تفکیکی):
دیدگاهتان را بنویسید