راهنمایی درباره ویژگی animation-fill-mode در CSS

مقدمه‌ای به ویژگی animation-fill-mode

در دنیای انیمیشن‌های CSS، ویژگی animation-fill-mode نقش مهمی در کنترل ظاهر عناصر قبل و بعد از اجرای انیمیشن بازی می‌کند. این ویژگی به ما امکان می‌دهد تا تعیین کنیم که استایل‌های یک انیمیشن چگونه به عنصر نسبت داده می‌شوند، زمانی که انیمیشن در حال اجرا نیست.

حالت‌های مختلف animation-fill-mode

این ویژگی دارای چندین حالت است که هر یک می‌تواند برای موارد خاصی مفید باشد. حالت forwards باعث می‌شود استایل نهایی انیمیشن بعد از اتمام آن، روی عنصر باقی بماند. حالت backwards نیز استایل‌های اولیه انیمیشن را پیش از شروع واقعی آن اعمال می‌کند. به علاوه، گزینه both ترکیبی از هر دو حالت را ارائه می‌دهد و none هیچ تغییری در استایل اعمال نمی‌کند.

کاربرد عملی ویژگی animation-fill-mode

استفاده از animation-fill-mode می‌تواند مانع از ایجاد پرش‌های ناخواسته در جریان انیمیشن شود و ظاهر یکنواختی به وب‌سایت بدهد. این حالت می‌تواند به طور قابل توجهی تجربه کاربری را بهبود بخشد. برخی از حالات ممکن است در هنگام ایجاد انیمیشن‌های پیچیده خصوصاً مفید باشند.

مثالی از کد برای ویژگی animation-fill-mode

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.element {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

توضیح کد بالا خط به خط

@keyframes fadeIn – در اینجا یک انیمیشن تعریف کرده‌ایم که از شفافیت 0 تا 1 تغییر می‌کند.
from – شروع انیمیشن با شفافیت 0.
to – پایان انیمیشن با شفافیت 1.
.element – این کلاس به یک عنصر HTML اعمال می‌شود.
animation-name – نام انیمیشنی که باید اجرا شود؛ در اینجا fadeIn است.
animation-duration – مدت زمان اجرای انیمیشن که 2 ثانیه تعیین شده است.
animation-fill-mode – پس از پایان انیمیشن استایل پایانی (شفافیت 1) بر روی عنصر باقی می‌ماند.