انتقال‌ها (Transitions)

آشنایی با transition در CSS: انیمیشن نرم بین دو حالت با control کامل

Transition در CSS

transition اجازه می‌دهد تغییرات CSS به‌صورت نرم و انیمیشنی انجام شوند، نه ناگهانی.

چهار ویژگی transition

ویژگیتوضیحمثال
transition-propertyکدام ویژگیall, color
transition-durationمدت زمان0.3s
transition-timing-functionنحوه تغییرease, linear
transition-delayتأخیر0.5s

Shorthand

.box {
        /* property duration timing delay */
        transition: all 0.3s ease 0s;
        /* یا ساده‌تر */
        transition: 0.3s;
    }

یک ویژگی خاص

.btn {
        transition: background 0.3s, transform 0.2s;
    }

timing-function

مقدارتوضیح
easeآرام شروع، تند وسط، آرام پایان (پیش‌فرض)
linearیکنواخت
ease-inآرام شروع، تند پایان
ease-outتند شروع، آرام پایان
ease-in-outآرام دو طرف
cubic-bezier()سفارشی

چه چیزی می‌توان transition کرد؟

/* ✅ قابل transition */
    color, background, opacity, transform, border, margin, padding, box-shadow
    
    /* ❌ غیرقابل transition (مثل) */
    display, position

مثال‌های کاربردی

/* دکمه */
    .btn {
        background: #3498db;
        transition: all 0.3s ease;
    }
    .btn:hover {
        background: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52,152,219,0.4);
    }
    
    /* کارت */
    .card {
        transition: transform 0.3s, box-shadow 0.3s;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط