BenoService

آکادمی بنو/آموزش CSS

Transition در CSS

بهنام نوبخت · ۱۴۰۵/۶/۲۸

در طراحی رابط کاربری، بسیاری از تغییرات CSS به‌صورت فوری اتفاق می‌افتند. مثلاً وقتی کاربر ماوس را روی یک دکمه قرار می‌دهد، رنگ پس‌زمینه، رنگ متن یا اندازه آن می‌تواند بلافاصله تغییر کند. این رفتار از نظر فنی کاملاً درست است، اما در بسیاری از طراحی‌های مدرن، تغییر ناگهانی عناصر ظاهر چندان جذابی ندارد.

CSS با استفاده از ویژگی Transition امکان ایجاد تغییرات تدریجی و نرم بین دو وضعیت را فراهم می‌کند. به کمک Transition می‌توان مشخص کرد یک تغییر چه مدت طول بکشد، با چه سرعتی انجام شود، روی کدام ویژگی‌ها اعمال شود و آیا با تأخیر شروع شود یا خیر.

برای مثال، به‌جای اینکه رنگ یک دکمه هنگام hover ناگهان تغییر کند:

button:hover {
    background-color: #16a34a;
}

می‌توانیم تغییر رنگ را طی چند دهم ثانیه انجام دهیم:

button {
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #16a34a;
}

همین تغییر کوچک می‌تواند ظاهر یک رابط کاربری را بسیار حرفه‌ای‌تر کند.

Transition چیست؟

Transition در CSS روشی برای ایجاد تغییر تدریجی بین دو وضعیت یک عنصر است.

فرض کنید یک کارت در حالت عادی چنین ویژگی‌هایی دارد:

.card {
    background-color: white;
    transform: translateY(0);
}

و هنگام قرار گرفتن ماوس روی آن چنین می‌شود:

.card:hover {
    background-color: #f5f5f5;
    transform: translateY(-8px);
}

بدون Transition، تغییرات تقریباً بلافاصله اتفاق می‌افتند.

اما اگر بنویسیم:

.card {
    transition: 0.3s ease;
}

مرورگر تغییر بین وضعیت اولیه و وضعیت hover را به‌صورت تدریجی نمایش می‌دهد.

در واقع Transition برای حرکت یا تغییر بین دو state بسیار مناسب است؛ برای مثال:

  • حالت عادی → hover

  • حالت عادی → focus

  • حالت عادی → active

  • حالت بسته → باز

  • وضعیت اولیه → وضعیتی که با JavaScript ایجاد شده است

ساختار اصلی Transition

Transition چند بخش اصلی دارد:

transition-property
transition-duration
transition-timing-function
transition-delay

و معمولاً همه آن‌ها را با ویژگی کوتاه‌شده transition ترکیب می‌کنیم.

ساختار کلی:

transition: property duration timing-function delay;

مثلاً:

transition: background-color 0.3s ease 0s;

یعنی:

  • ویژگی مورد نظر: background-color

  • مدت زمان: 0.3s

  • نحوه تغییر سرعت: ease

  • تأخیر: 0s

transition-property

این ویژگی مشخص می‌کند کدام ویژگی CSS باید Transition داشته باشد.

مثلاً:

.box {
    transition-property: background-color;
}

در این حالت فقط تغییر background-color به‌صورت تدریجی انجام می‌شود.

مثال:

.box {
    background-color: white;
    color: black;

    transition-property: background-color;
    transition-duration: 0.4s;
}

.box:hover {
    background-color: black;
    color: white;
}

در این مثال:

  • تغییر پس‌زمینه نرم است.

  • تغییر رنگ متن Transition ندارد.

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

.box {
    transition-property: background-color, color, transform;
}

اکنون هر سه ویژگی می‌توانند Transition داشته باشند.

مقدار all

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

.box {
    transition-property: all;
}

در این حالت تغییرات ویژگی‌های مختلفی که قابل Transition باشند تحت Transition قرار می‌گیرند.

مثلاً:

.box {
    transition-property: all;
    transition-duration: 0.3s;
}

اما استفاده از all همیشه بهترین انتخاب نیست.

در پروژه‌های واقعی معمولاً بهتر است ویژگی‌هایی را که واقعاً قصد تغییر آن‌ها را داریم مشخص کنیم:

.card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

این روش کنترل بیشتری روی رفتار رابط کاربری ایجاد می‌کند.

transition-duration

ویژگی transition-duration مشخص می‌کند تغییر چه مدت زمانی طول بکشد. مقدار پیش‌فرض آن 0s است؛ بنابراین اگر مدت زمان تعیین نشود، Transition عملاً قابل مشاهده نخواهد بود.

مثال:

.box {
    transition-duration: 0.5s;
}

یا:

.box {
    transition-duration: 500ms;
}

این دو تقریباً معادل یکدیگر هستند:

0.5s = 500ms

مثال

button {
    background-color: #2563eb;
    transition-property: background-color;
    transition-duration: 0.3s;
}

button:hover {
    background-color: #1d4ed8;
}

رنگ دکمه طی 0.3 ثانیه تغییر می‌کند.

انتخاب مدت زمان مناسب

برای رابط‌های کاربری معمولاً زمان‌های کوتاه مناسب‌تر هستند.

مثلاً:

transition: transform 0.2s ease;

یا:

transition: all 0.3s ease;

برای برخی تغییرات می‌توان از زمان‌های طولانی‌تر استفاده کرد:

transition: transform 0.8s ease;

اما اگر برای یک دکمه معمولی بنویسیم:

transition: all 3s;

رفتار صفحه احتمالاً بسیار کند و غیرطبیعی خواهد شد.

پس Transition باید قابل احساس باشد، اما مزاحم کاربر نشود.

transition-timing-function

مدت زمان فقط یک بخش از Transition است.

سؤال دیگری وجود دارد:

تغییر با چه سرعتی انجام شود؟

مثلاً آیا سرعت تغییر از ابتدا تا انتها ثابت باشد؟

یا ابتدا سریع و سپس آرام شود؟

این موضوع توسط transition-timing-function کنترل می‌شود. این ویژگی منحنی سرعت تغییر بین مقادیر ابتدایی و نهایی را مشخص می‌کند.

مقدار ease

ease یکی از مقادیر رایج و مقدار پیش‌فرض Transition است.

.box {
    transition-timing-function: ease;
}

در بسیاری از رابط‌های کاربری، ease انتخاب خوبی برای شروع است.

مقدار linear

در linear سرعت تغییر در طول Transition ثابت باقی می‌ماند.

.box {
    transition-timing-function: linear;
}

مثلاً:

.box {
    transform: translateX(0);
    transition: transform 1s linear;
}

.box:hover {
    transform: translateX(200px);
}

عنصر با سرعت یکنواخت حرکت می‌کند.

ease-in

در ease-in تغییر در ابتدا آرام‌تر شروع می‌شود و سپس سرعت می‌گیرد.

.box {
    transition: transform 0.5s ease-in;
}

ease-out

در ease-out تغییر سریع‌تر شروع می‌شود و در انتها آرام می‌شود.

.box {
    transition: transform 0.5s ease-out;
}

این حالت برای بسیاری از تعاملات UI بسیار مناسب است.

مثلاً برای ظاهر شدن یا حرکت یک کارت:

.card {
    transition: transform 0.3s ease-out;
}

.card:hover {
    transform: translateY(-6px);
}

ease-in-out

در ease-in-out تغییر در ابتدا و انتها آرام‌تر است و در بخش میانی سریع‌تر انجام می‌شود.

.box {
    transition: transform 0.5s ease-in-out;
}

مقایسه Timing Functionها

مقدار

رفتار

linear

سرعت ثابت

ease

شروع و پایان نرم

ease-in

شروع آرام‌تر

ease-out

پایان آرام‌تر

ease-in-out

شروع و پایان آرام

برای شروع کار، این چهار مقدار را به‌خوبی یاد بگیرید:

linear
ease
ease-in
ease-out
ease-in-out

علاوه بر این موارد، CSS از توابعی مانند cubic-bezier() و steps() نیز پشتیبانی می‌کند.

cubic-bezier

اگر مقادیر آماده برای شما کافی نباشند، می‌توانید منحنی سرعت را خودتان تعیین کنید.

مثلاً:

.box {
    transition:
        transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

cubic-bezier() کنترل دقیق‌تری روی شتاب Transition می‌دهد.

در طراحی حرفه‌ای رابط کاربری، این قابلیت می‌تواند برای ساخت حرکات خاص و منحصر‌به‌فرد بسیار مفید باشد.

البته در پروژه‌های معمولی لازم نیست همه Transitionها را با cubic-bezier() بنویسید. اغلب مواقع ease-out یا ease-in-out کاملاً کافی است.

steps

یک تابع دیگر steps است که به‌جای حرکت کاملاً پیوسته، تغییر را در چند مرحله انجام می‌دهد.

مثلاً:

.box {
    transition: transform 1s steps(5);
}

این نوع Transition برای رفتارهای مرحله‌ای یا بعضی جلوه‌های خاص کاربرد دارد.

برای طراحی‌های معمولی UI کمتر از آن استفاده می‌شود، اما شناخت آن برای کار با CSS حرفه‌ای مفید است.

transition-delay

ویژگی transition-delay مشخص می‌کند Transition چه مدت بعد از تغییر مقدار CSS شروع شود.

مثلاً:

.box {
    transition:
        transform 0.5s ease 0.3s;
}

در اینجا:

0.5s → duration
0.3s → delay

یعنی ابتدا 0.3 ثانیه صبر می‌شود و سپس Transition طی 0.5 ثانیه انجام می‌شود.

مثال

.card {
    transform: translateY(0);
    transition:
        transform 0.4s ease 0.2s;
}

.card:hover {
    transform: translateY(-10px);
}

هنگام hover:

  1. مرورگر تغییر را تشخیص می‌دهد.

  2. 0.2s صبر می‌کند.

  3. سپس حرکت طی 0.4s انجام می‌شود.

Transition Shorthand

در پروژه‌های واقعی معمولاً به‌جای نوشتن چهار ویژگی جداگانه، از transition استفاده می‌کنیم.

مثلاً:

button {
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

می‌توان آن را به شکل کوتاه‌تر نوشت:

button {
    transition: background-color 0.3s ease 0s;
}

و حتی:

button {
    transition: background-color 0.3s ease;
}

چون مقدار delay در این مثال صفر است، نیازی به نوشتن آن نداریم.

ساختار عمومی:

transition: property duration timing-function delay;

مثلاً:

transition: transform 0.3s ease-out 0.1s;

Transition چند ویژگی به‌صورت هم‌زمان

می‌توان چند Transition را با کاما از یکدیگر جدا کرد.

مثلاً:

.card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

سپس:

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}

در نتیجه:

  • کارت حرکت می‌کند.

  • سایه تغییر می‌کند.

  • رنگ پس‌زمینه تغییر می‌کند.

و همه این تغییرات به‌صورت نرم اتفاق می‌افتند.

ترکیب Transition و Transform

یکی از مهم‌ترین ترکیب‌ها در طراحی رابط کاربری:

transition + transform

مثلاً:

.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
}

یا:

.image {
    transition: transform 0.4s ease;
}

.image:hover {
    transform: scale(1.05);
}

این تکنیک را در موارد زیادی می‌بینید:

  • کارت محصولات

  • تصاویر

  • دکمه‌ها

  • آیکون‌ها

  • منوها

  • لینک‌ها

  • کارت‌های خدمات

ساخت افکت Zoom برای تصویر

یکی از افکت‌های بسیار رایج:

<div class="image-box">
    <img src="image.jpg" alt="تصویر محصول">
</div>

CSS:

.image-box {
    overflow: hidden;
    border-radius: 16px;
}

.image-box img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.image-box:hover img {
    transform: scale(1.08);
}

در این مثال:

transition: transform 0.4s ease;

باعث می‌شود بزرگ شدن تصویر نرم باشد.

و:

overflow: hidden;

باعث می‌شود قسمت اضافی تصویر خارج از محدوده کادر دیده نشود.

Transition و Box Shadow

Transition فقط برای حرکت نیست.

می‌توان سایه را نیز نرم تغییر داد:

.card {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16);
}

این تکنیک برای کارت‌های مدرن بسیار کاربردی است.

حتی می‌توان آن را با transform ترکیب کرد:

.card {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16);
}

Transition برای دکمه‌های مدرن

مثلاً یک دکمه ساده:

<a href="#" class="btn">
    مشاهده خدمات
</a>

CSS:

.btn {
    display: inline-block;

    padding: 12px 24px;

    background-color: #f97316;
    color: white;

    border-radius: 10px;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.btn:hover {
    background-color: #ea580c;

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.25);
}

این الگو برای سایت‌های تجاری و Landing Pageها بسیار کاربردی است.

Transition برای لینک‌ها

یک لینک ساده:

a {
    color: #2563eb;
    transition: color 0.2s ease;
}

a:hover {
    color: #1d4ed8;
}

حتی می‌توان افکت‌های بیشتری ایجاد کرد.

مثلاً:

a {
    color: #333;
    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

a:hover {
    color: #f97316;
}

Transition برای آیکون

فرض کنید یک آیکون فلش داریم:

<a href="#" class="more">
    بیشتر بخوانید
    <span>←</span>
</a>

CSS:

.more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.more span {
    transition: transform 0.2s ease;
}

.more:hover span {
    transform: translateX(-5px);
}

حالا هنگام hover، فلش کمی حرکت می‌کند.

این نوع Micro Interaction باعث می‌شود رابط کاربری زنده‌تر به نظر برسد.

یک نکته بسیار مهم: Transition را کجا بنویسیم؟

یکی از اشتباهات رایج این است که Transition را فقط داخل :hover قرار دهیم:

button:hover {
    transition: transform 0.3s ease;
    transform: scale(1.05);
}

این روش مناسب نیست.

بهتر است Transition در حالت اصلی قرار بگیرد:

button {
    transition: transform 0.3s ease;
}

button:hover {
    transform: scale(1.05);
}

چرا؟

زیرا Transition باید رفتار ورود و خروج از حالت تغییر یافته را کنترل کند.

بنابراین:

.element {
    transition: ...;
}

و:

.element:hover {
    /* تغییرات */
}

معمولاً ساختار بهتری است.

آیا از transition: all استفاده کنیم؟

می‌توان نوشت:

.card {
    transition: all 0.3s ease;
}

اما بهتر است در پروژه‌های حرفه‌ای تا حد امکان مشخص کنیم چه ویژگی‌هایی باید تغییر کنند.

مثلاً:

.card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

این روش خواناتر است و رفتار مورد نظر را دقیق‌تر مشخص می‌کند.

transition: all لزوماً همیشه مشکل‌ساز نیست، اما وقتی فقط چند ویژگی مشخص قرار است تغییر کنند، انتخاب صریح آن ویژگی‌ها معمولاً تصمیم بهتری است.

چه ویژگی‌هایی برای Transition مناسب هستند؟

Transition زمانی کاربردی است که یک ویژگی بتواند از یک مقدار به مقدار دیگری به‌صورت تدریجی تغییر کند.

نمونه‌های رایج:

color
background-color
opacity
transform
box-shadow
border-color
width
height
padding
margin

مثلاً:

.box {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.box:hover {
    opacity: 0.6;
}

یا:

.box {
    border-color: #ddd;
    transition: border-color 0.3s ease;
}

.box:hover {
    border-color: #f97316;
}

تفاوت Transition و Animation

در این مرحله یک سؤال مهم ایجاد می‌شود:

Transition چه تفاوتی با Animation دارد؟

به‌صورت ساده:

Transition

برای تغییر بین دو وضعیت بسیار مناسب است:

Normal → Hover

مثلاً:

button:hover {
    transform: scale(1.05);
}

Animation

برای اجرای یک حرکت یا مجموعه‌ای از مراحل مستقل مناسب‌تر است.

مثلاً:

 پایان → چرخش → تغییر اندازه → حرکت → شروع

Animation معمولاً با @keyframes تعریف می‌شود.

در مقاله بعدی به‌صورت کامل سراغ Animation و @keyframes خواهیم رفت.

استفاده از Transition در طراحی کارت خدمات

حالا یک مثال نزدیک به یک پروژه واقعی بسازیم.

HTML:

<section class="services">

    <article class="service-card">
        <div class="service-icon">
            💻
        </div>

        <h3>طراحی سایت</h3>

        <p>
            طراحی سایت مدرن و Responsive برای کسب‌وکار شما.
        </p>

        <a href="#" class="service-link">
            مشاهده بیشتر ←
        </a>
    </article>

    <article class="service-card">
        <div class="service-icon">
            🚀
        </div>

        <h3>بهینه‌سازی سایت</h3>

        <p>
            بهبود سرعت و تجربه کاربری سایت.
        </p>

        <a href="#" class="service-link">
            مشاهده بیشتر ←
        </a>
    </article>

</section>

CSS:

.services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.service-card {
    padding: 30px;

    background-color: white;

    border: 1px solid #e5e7eb;
    border-radius: 20px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);

    border-color: #f97316;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.service-icon {
    font-size: 40px;

    margin-bottom: 20px;

    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(-3deg);
}

.service-link {
    color: #f97316;

    text-decoration: none;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}

.service-link:hover {
    color: #ea580c;
}

در این مثال چند مفهوم را هم‌زمان استفاده کردیم:

  • transition

  • transform

  • box-shadow

  • border-color

  • scale

  • rotate

  • hover

این دقیقاً همان نوع ترکیبی است که در رابط‌های کاربری مدرن زیاد استفاده می‌شود.

ساخت یک دکمه با افکت حرفه‌ای

مثال دیگری بسازیم:

<button class="primary-button">
    شروع کنید
</button>

CSS:

.primary-button {
    padding: 14px 28px;

    border: none;
    border-radius: 12px;

    background-color: #f97316;
    color: white;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.primary-button:hover {
    background-color: #ea580c;

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.25);
}

.primary-button:active {
    transform: translateY(0);
}

حالا رفتار دکمه چنین است:

حالت عادی
     ↓
Hover
     ↓
کمی بالا می‌رود
     ↓
سایه افزایش پیدا می‌کند
     ↓
رنگ تغییر می‌کند
     ↓
Click
     ↓
به حالت فشرده برمی‌گردد

این یک نمونه ساده از Micro Interaction در طراحی UI است.

Transition و Accessibility

حرکت‌های زیاد و سریع برای بعضی کاربران مناسب نیستند. سیستم‌عامل‌ها و مرورگرها می‌توانند ترجیح کاربر برای کاهش حرکت را در اختیار CSS قرار دهند.

برای این منظور می‌توان از Media Query زیر استفاده کرد:

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
    }
}

ایده اصلی این است که اگر کاربر ترجیح می‌دهد حرکت‌های رابط کاربری کمتر باشند، سایت نیز Motion کمتری نمایش دهد.

این موضوع مخصوصاً در سایت‌هایی که Animation و Transition زیادی دارند اهمیت پیدا می‌کند.

اشتباهات رایج در استفاده از Transition

۱. قرار دادن Transition فقط روی Hover

اشتباه:

button:hover {
    transition: transform 0.3s;
}

بهتر:

button {
    transition: transform 0.3s;
}

button:hover {
    transform: scale(1.05);
}

۲. استفاده بیش از حد از Transition

اگر همه عناصر صفحه هنگام Hover حرکت کنند، صفحه ممکن است شلوغ و آزاردهنده شود.

Transition باید برای تقویت تجربه کاربری استفاده شود، نه اینکه صرفاً برای نمایش تکنیک CSS باشد.

۳. استفاده از زمان‌های بسیار طولانی

مثلاً:

transition: all 5s ease;

برای یک دکمه معمولی مناسب نیست.

معمولاً زمان‌های کوتاه‌تر برای تعاملات UI مناسب‌تر هستند.

۴. استفاده بی‌دلیل از all

به‌جای:

transition: all 0.3s ease;

اگر فقط دو ویژگی تغییر می‌کنند:

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

خواناتر و کنترل‌شده‌تر است.

۵. انتخاب Timing Function نامناسب

برای هر تعامل لازم نیست linear استفاده کنیم.

مثلاً برای یک کارت:

transition: transform 0.3s ease-out;

ممکن است طبیعی‌تر از:

transition: transform 0.3s linear;

به نظر برسد.

بنابراین Timing Function بخشی از طراحی Interaction است.

پروژه عملی: کارت خدمات تعاملی

در این تمرین یک کارت خدمات حرفه‌ای ایجاد کنید.

کارت باید شامل موارد زیر باشد:

┌──────────────────────────┐
│          ICON            │
│                          │
│      طراحی سایت         │
│                          │
│  توضیح کوتاه درباره    
│  سرویس مورد نظر         │
│                          │
│      مشاهده بیشتر →     │
└──────────────────────────┘

در حالت عادی:

  • پس‌زمینه سفید

  • Border خاکستری

  • سایه کم

  • آیکون در اندازه معمولی

در hover:

  • کارت کمی به سمت بالا حرکت کند.

  • سایه بیشتر شود.

  • Border تغییر رنگ دهد.

  • آیکون کمی بزرگ شود.

  • لینک تغییر رنگ دهد.

راهنمای شروع

.service-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

سپس:

.service-card:hover {
    transform: translateY(-8px);
}

و سایر تغییرات را خودتان اضافه کنید.

تمرین‌های مقاله

تمرین ۱ — دکمه

یک دکمه بسازید که هنگام hover:

  • رنگش تغییر کند.

  • کمی بالا برود.

  • سایه ایجاد کند.

تمرین ۲ — تصویر

یک تصویر بسازید که هنگام Hover کمی بزرگ شود:

transform: scale(...);

و تغییر آن را با Transition نرم کنید.

تمرین ۳ — کارت

یک کارت طراحی کنید که هنگام Hover:

translateY
box-shadow
border-color

همگی به‌صورت نرم تغییر کنند.

تمرین ۴ — Timing Function

یک عنصر بسازید و برای آن این چهار حالت را امتحان کنید:

linear
ease
ease-in
ease-out

تفاوت آن‌ها را هنگام Hover مشاهده کنید.

جمع‌بندی

Transition یکی از ابزارهای مهم CSS برای ایجاد رابط‌های کاربری نرم و حرفه‌ای است. به‌جای اینکه تغییرات CSS به‌صورت ناگهانی اتفاق بیفتند، Transition به مرورگر اجازه می‌دهد تغییر بین دو وضعیت را طی یک بازه زمانی نمایش دهد.

چهار ویژگی اصلی آن عبارت‌اند از:

transition-property
transition-duration
transition-timing-function
transition-delay

اما در بیشتر پروژه‌ها از شکل کوتاه‌شده استفاده می‌کنیم:

transition: transform 0.3s ease;

یکی از مهم‌ترین الگوهایی که باید از این مقاله به خاطر بسپارید این است:

.element {
    transition: ...;
}

.element:hover {
    /* تغییرات */
}

با ترکیب Transition و ویژگی‌هایی مانند:

transform
box-shadow
background-color
color
opacity

می‌توان رابط‌های کاربری بسیار جذاب‌تری ایجاد کرد.

در این مقاله Transition را برای تغییر بین دو وضعیت یاد گرفتیم. اما اگر بخواهیم یک عنصر را بدون نیاز به hover یا تعامل مستقیم کاربر، در چند مرحله مختلف حرکت دهیم یا تغییر دهیم، به ابزار قدرتمندتری نیاز داریم.

۰۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.