الحركات — transitions و animations

الحركة الصح تضيف حياة للموقع بدون تشتيش. أول أداة: transition — تغيير ناعم بين حالتين:

button {
  background: #8b5cf6;
  transition: background .3s, transform .3s;
}

button:hover {
  background: #7c3aed;
  transform: scale(1.05);
}

أما animation مع keyframes: حركة متعددة المراحل تتكرر:

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.badge { animation: pulse 2s infinite; }

قاعدة ذهبية: مدة 0.2 إلى 0.4 ثانية للتفاعلات الصغيرة، وحرك بـ transform و opacity لأن المتصفح يسرّعها — أما width وغيرها فتعيد حساب الصفحة كاملة وتعلّق.