زمان‌بندی (Timing) در CSS نقش مهمی در نحوه اجرای انیمیشن‌ ها (animation) و ترنزیشن‌ ها (transition) دارد.

این ویژگی تعیین می‌کند که تغییرات در طول زمان چگونه رخ دهند؛ آیا به‌صورت یکنواخت انجام شوند یا با شتاب‌گیری و کاهش سرعت همراه باشند.

در این مقاله، انواع Timing Function در CSS را بررسی کرده و تأثیر آن‌ها را بر روی انیمیشن‌ها توضیح خواهیم داد.

۱. مفهوم Timing Function در CSS

timing-function مشخص می‌کند که چگونه مقدار یک ویژگی در طول زمان تغییر کند. این ویژگی هم در transition و هم در animation قابل استفاده است.

• در ترنزیشن:

transition-timing-function: ease;

• در انیمیشن:

animation-timing-function: ease-in-out;

🔹 مقدار timing-function روی نحوه حرکت یک المان در طول انیمیشن یا ترنزیشن تأثیر می‌گذارد.

۲. انواع زمان‌ بندی (Timing Functions) در CSS

۱. Linear (تغییر یکنواخت و بدون شتاب)

در این حالت، تغییرات با سرعت ثابت و یکنواخت انجام می‌شوند.

transition-timing-function: linear;

🔹 ویژگی: مناسب برای حرکاتی که باید بدون شتاب اجرا شوند، مانند تغییر رنگ.

🔹 مثال: حرکت یکنواخت یک جعبه

.box {
    transition: transform 2s linear;
}
.box:hover {
    transform: translateX(100px);
}

۲. Ease (شروع و پایان نرم، شتاب در وسط)

این مقدار پیش‌فرض در transition است. تغییرات در ابتدا و انتها نرم و کند هستند اما در میانه سریع‌تر اتفاق می‌افتند.

transition-timing-function: ease;

🔹 ویژگی: مناسب برای افکت‌های طبیعی‌تر مانند حرکت دکمه‌ها و پنجره‌های پاپ‌آپ.

۳. Ease-in (شروع کند، پایان سریع)

در این حالت، تغییرات ابتدا آهسته آغاز شده و به تدریج سرعت می‌گیرند.

transition-timing-function: ease-in;

🔹 ویژگی: مناسب برای افکت‌هایی که باید حس ورود تدریجی ایجاد کنند، مثل نمایش متن.

🔹 مثال: افزایش اندازه با ease-in

.box {
    transition: transform 1s ease-in;
}
.box:hover {
    transform: scale(1.5);
}

۴. Ease-out (شروع سریع، پایان کند)

تغییرات با سرعت بالا آغاز شده و به تدریج کند می‌شوند.

transition-timing-function: ease-out;

🔹 ویژگی: مناسب برای افکت‌هایی که باید حس خروج نرم داشته باشند، مثل بستن منوها.

۵. Ease-in-out (شروع و پایان کند، شتاب در وسط)

این مقدار ترکیبی از ease-in و ease-out است، یعنی حرکت در ابتدا و انتها کند و در میانه سریع‌تر است.

transition-timing-function: ease-in-out;

🔹 ویژگی: مناسب برای انیمیشن‌هایی که حرکت طبیعی و روان نیاز دارند.

🔹 مثال: تغییر عرض با ease-in-out

.box {
    transition: width 1.5s ease-in-out;
}
.box:hover {
    width: 200px;
}

۶. Cubic Bezier (کنترل کامل حرکت)

cubic-bezier(n, n, n, n) امکان تنظیم حرکت سفارشی را با استفاده از نقاط کنترلی فراهم می‌کند.

transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);

🔹 ویژگی: مناسب برای حرکات غیرمعمول و خلاقانه، مانند افکت‌های سینمایی و حرکات کارتونی.

💡 برای تست مقادیر cubic-bezier، می‌توانید از سایت cubic-bezier.com استفاده کنید.

۳. استفاده از timing-function در انیمیشن‌ ها

در animation نیز می‌توان از timing-function برای کنترل حرکت استفاده کرد.

مثال: چرخش با ease-in-out

@keyframes rotateBox {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.box {
    animation: rotateBox 2s ease-in-out infinite;
}

✅ در این مثال، جعبه به‌صورت چرخش نرم و طبیعی در هر چرخه حرکت می‌کند.

۴. ترکیب timing-function با delay و duration

ویژگی‌های duration (مدت زمان) و delay (تأخیر) می‌توانند همراه با timing-function استفاده شوند.

مثال: انیمیشن با تأخیر و ease-out

.box {
    transition: transform 1s ease-out 0.5s;
}
.box:hover {
    transform: translateX(150px);
}

✅ این کد باعث می‌شود تغییر با ۰.۵ ثانیه تأخیر آغاز شده و با سرعت زیاد شروع شود اما به‌تدریج کند شود.

۵. مقایسه انواع timing-function با مثال تصویری

۶. جمع‌بندی

✔ timing-function در transition و animation برای کنترل نحوه تغییرات در طول زمان استفاده می‌شود.
✔ linear تغییرات را بدون شتاب اجرا می‌کند.
✔ ease شروع و پایان نرم دارد و حرکت واقع‌گرایانه‌تر ایجاد می‌کند.
✔ ease-in شروع کند و ease-out پایان کند دارد.
✔ ease-in-out ترکیبی از هر دو و مناسب برای حرکت‌های طبیعی‌تر است.
✔ cubic-bezier امکان کنترل دقیق‌تر حرکت را فراهم می‌کند.
✔ ترکیب timing-function با duration, delay, و animation باعث ایجاد افکت‌های پیشرفته و حرفه‌ای می‌شود.

با یادگیری این مفاهیم، می‌توانید افکت‌های جذاب و حرفه‌ای در طراحی وب خود ایجاد کنید! 🚀