مفهوم «CSS animatable» یعنی کدام ویژگی‌های CSS را می‌توان با transition یا @keyframes (animation) به‌صورت پیوسته تغییر داد. در ادامه خلاصه، نکات عملی و چند مثال آماده به زبان فارسی:

چه ویژگی‌هایی قابل انیمیت هستند (مثله‌ترین‌ها)

• transform (translate, rotate, scale, skew) — بسیار مناسب و GPU-accelerated.

• opacity — سبک و سریع.

• color, background-color, border-color — رنگ‌ها قابل انیمیت‌اند.

• width, height, margin, padding, top/left/right/bottom — قابل انیمیت اما باعث بازچینی (layout) می‌شوند و هزینه‌برند.

• box-shadow, filter (مثل blur, brightness) — قابل انیمیت اما بعضی فیلترها سنگین‌اند.

• font-size — قابل انیمیت است.

• clip-path — قابل انیمیت در مرورگرهای مدرن (محدودیت‌های پشتیبانی وجود دارد).

چه ویژگی‌هایی قابل‌انیمیت نیستند (یا قابل‌انیمیت توصیه نمی‌شود)

• display — غیرقابل‌انیمیت.

• تغییرات مربوط به «درخت DOM» یا تغییر نوع نمایش (مثلاً display: none ↔ block) را نمی‌توان انیمیت کرد.

• برخی ویژگی‌های منطقی/گروهی یا پیچیده (مانند background-image) عموماً قابل انیمیت نیستند.

نکات عملکردی و توصیه‌ها

• برای انیمیشن‌های روان و کم‌هزینه از transform و opacity استفاده کن چون معمولاً توسط GPU اجرا می‌شوند و باعث repaint/ reflow کمتر می‌شوند.

• از انیمیت کردن مواردی که نیاز به بازچینی صفحه دارند (مثل width یا left) برای المان‌های بزرگ یا پیچیده اجتناب کن اگر می‌خواهی انیمیشن روانی داشته باشی.

• از will-change با احتیاط استفاده کن (برای hint دادن به مرورگر)، اما زیاد از آن استفاده نکن چون حافظه مصرف می‌کند.

مثال — transition (ساده)

.button {
background-color: #3b82f6;
transform: translateY(0);
transition: transform 250ms ease, background-color 250ms ease;
}

.button:hover {
transform: translateY(-6px) scale(1.02);
background-color: #2563eb;
}

مثال — keyframes (animation)

@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-12px); }
100% { transform: translateY(0); }
}

.card {
animation: float 3s ease-in-out infinite;
}

چک‌لیست سریع

• می‌خواهی انیمیشن سبک و روان باشه؟ → از transform و opacity استفاده کن.

• باید رنگ یا سایه رو تغییر بدی؟ → color, background-color, box-shadow OK.

• تغییر اندازه یا موقعیت که منجر به بازچینی می‌شه؟ → پذیرفتنی ولی مراقب عملکرد باش.