🚀 چرا بعضی سایت‌ها با کلی انیمیشن هنوز روان اجرا میشن؟

مشکل انیمیشن معمولاً خود انیمیشن نیست؛
مشکل اینه که چه چیزی رو Animate می‌کنی.

مثلاً این:

.box {
    left: 100px;
    transition: left .3s;
}

ممکنه باعث بشه مرورگر مجبور بشه Layout رو دوباره محاسبه کنه.

ولی برای خیلی از انیمیشن‌ها، استفاده از:

.box {
    transform: translateX(100px);
    transition: transform .3s;
}

انتخاب بهتریه.

چرا؟

چون transform معمولاً برای انیمیشن‌های حرکتی مناسب‌تره و می‌تونه فشار روی فرآیند Layout رو کمتر کنه.

قاعده ساده:

برای حرکت و Scale و Rotate، اول به transform فکر کن.

نه اینکه هر چیزی رو با:

top
left
width
height

انیمیت کنی.

یه انیمیشن قشنگ که روی موبایل 20FPS اجرا بشه، دیگه قشنگ نیست. 😄

طراحی خوب فقط ظاهر نیست؛ باید روان هم باشه.

@CodeVerse_dev