كيف تعمل حركات CSS keyframe؟

Question

Accepted Answer

بينما تقوم الانتقالات بتحريك *حالتين فقط*، فإن **حركات `@keyframes`** تحدد سلسلة متعددة الخطوات يمكنها أن تعمل تلقائياً وتكرار نفسها والانتقال عبر العديد من الحالات الوسيطة.

## تحديد وتطبيق حركة

```css
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; } /* 0% */
  to   { transform: translateX(0);     opacity: 1; } /* 100% */
}

.panel {
  animation: slide-in 0.5s ease-out;
}
```

## keyframes متعددة الخطوات مع نسب مئوية

```css
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); } /* peak of the bounce */
  100% { transform: translateY(0); }
}
```

تتيح لك النسب المئوية تصميم عدة مراحل في حركة واحدة — وهو أمر مستحيل مع انتقال بسيط.

## اختصار الحركة الكامل

```css
.spinner {
  animation: spin 1s linear infinite;
  /*         │    │    │      └── iteration-count (infinite = loop forever) */
  /*         │    │    └───────── timing function */
  /*         │    └────────────── duration */
  /*         └─────────────────── @keyframes name */
}
@keyframes spin { to { transform: rotate(360deg); } } /* classic loading spinner */
```

خصائص أخرى: `animation-delay`، `animation-direction: alternate` (ذهاب وإياب)، `animation-fill-mode: forwards` (الاحتفاظ بالحالة النهائية)، `animation-play-state: paused`.

## الأداء — حرّك transform/opacity فقط

```css
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animating width/height/top forces layout every frame → jank */
@keyframes bad  { to { width: 300px; top: 50px; } }
```

تعمل حركات keyframe على كل إطار، لذا فإن تحريك الخصائص التي تؤثر على التخطيط أكثر تكلفة بكثير من تحريك `transform`/`opacity`.

## إمكانية الوصول

```css
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; } /* honor users sensitive to motion */
}
```

## لماذا هذا مهم

تعمل حركات Keyframe على تشغيل أجهزة التحميل والتلميحات الانتباهية والمدخلات والتأثيرات المتكررة التي لا يمكن للانتقالات التعبير عنها (متعددة الخطوات، تعمل تلقائياً، لا نهائية).

إن معرفة الاختصار والالتزام بـ `transform`/`opacity` للسلاسة واحترام `prefers-reduced-motion` يتيح لك بناء حركة غنية تبقى فعّالة وسهلة الوصول إليها.