رسوم متحركة CSS

@keyframes

يُحدد تسلسل الرسوم المتحركة بتعيين أنماط عند نقاط مختلفة:

مثال

HTML

<style>
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slideIn 0.5s ease-out;
}
</style>
<div class="slide-in">يزحلق من اليسار</div>

▶ جرّب الكود

خصائص animation

مرجع سريع

الخاصية	القيم	الغرض
`animation-name`	`@keyframes name`	اسم الرسم المتحرك
`animation-duration`	`1s`، `500ms`	مدة الرسم المتحرك
`animation-timing-function`	`ease`، `linear`، `ease-in`، `ease-out`	منحنى السرعة
`animation-delay`	`0.5s`، `-1s`	تأخير قبل البدء
`animation-iteration-count`	`1`، `2`، `infinite`	عدد مرات التشغيل
`animation-direction`	`normal`، `reverse`، `alternate`	اتجاه التشغيل
`animation-fill-mode`	`none`، `forwards`، `backwards`، `both`	النمط قبل/بعد

اختصار

CSS

.animation {
  animation: slideIn 0.5s ease-out 0.2s infinite alternate forwards;
  /* name duration timing-function delay iteration-count direction fill-mode */
}

رسوم متحركة شائعة

تلاشي للداخل

مثال

HTML

<style>
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s ease-in;
}
</style>
<div class="fade-in">رسم متحرك بتلاشي للداخل</div>

▶ جرّب الكود

ارتداد

مثال

HTML

<style>
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce {
  animation: bounce 1s infinite;
}
</style>
<div class="bounce">عنصر يرتد</div>

▶ جرّب الكود

مؤشر تحميل دوّار

مثال

HTML

<style>
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
</style>
<div class="spinner"></div>

▶ جرّب الكود

نصائح الأداء

⚠️ تحذير أداء: لا تُحرّك عناصر كثيرة في وقت واحد. تحريك 20-30 عنصراً في وقت واحد يُسبب تقطيعاً. استخدم will-change لإخبار المتصفحات بالعناصر التي ستتحرك، لكن لا تُسيء استخدامها — عناصر will-change تستهلك ذاكرة GPU إضافية.

أفضل خصائص للتحريك:

transform (translate، scale، rotate)
opacity

تجنب تحريك:

width، height، margin، padding (يسبب إعادة تدفق)
box-shadow (مكلف في الحساب)

❓ أسئلة شائعة

س ما الفرق بين @keyframes و transition؟

ج transition يتعامل فقط مع تغييرات بسيطة من "الحالة A إلى الحالة B". @keyframes يمكنه تعريف إطارات رئيسية متعددة (0%، 50%، 100%) لرسوم معقدة متعددة المراحل. تأثيرات hover البسيطة تستخدم transition؛ تأثيرات التشغيل التلقائي المعقدة تستخدم @keyframes.

س هل animation: infinite يسبب تقطيعاً؟

ج الاستخدام المعقّل لن يسبب. لكن لا تُحرّك عناصر كثيرة في وقت واحد (يُوصى بعدم تجاوز 20). استخدم `will-change` لإخبار المتصفحات بالعناصر التي ستتغير، مساعدة في تسريع GPU. إذا فقدت الصفحة إطارات، قلّل العناصر المتحركة أو قصّر المدة.

س العنصر يعود بعد الرسم المتحرك — ماذا أفعل؟

ج اضبط `animation-fill-mode: forwards` — الرسم المتحرك يحافظ على حالة الإطار الأخير بعد الانتهاء. الافتراضي هو `none`، الذي يعود إلى موضع البداية.

📖 ملخص

رسوم @keyframes المتحركة أقوى من transition — يمكنها تعريف تسلسلات رسوم متحركة متعددة المراحل
من خلال خصائص فرعية لـ animation، تحكم عدد مرات التشغيل والاتجاه والتأخير ووضع التعبئة إلخ
اعطِ الأولوية لـ transform وopacity في الرسوم المتحركة لأفضل أداء
للحلقات اللانهائية (مثل مؤشرات التحميل)، استخدم infinite

📝 تمارين

أنشئ رسم متحرك "كرة مرتدّة" — كرة تسقط، ترتد، تضعف تدريجياً (باستخدام إطارات رئيسية متعددة المراحل).
أنشئ "مؤشر تحميل دوّار" — حلقة تدور باستمرار (تلميح: border + border-top-color + border-radius + animation).
أنشئ صفحة "تلاشي منزلق": العنوان ينزلق من الأعلى، الفقرة من الأسفل، الصورة من اليسار (رسوم مختلفة).
أنشئ زر "ضوء تنفسي" — سطوع الزر في دورة.