CSS: رسوم متحركة CSS

آخر تحديث: 2026-10-13

خصائص هذا القسم: animation-duration animation-timing-function transform opacity width height margin padding box-shadow animation

1. @keyframes

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

▶ مثال

▶ جرّب الكود

2. خصائص animation

(1) مرجع سريع

الخاصية	القيم	الغرض
`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`	النمط قبل/بعد

(2) اختصار

CSS

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

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

(1) تلاشي للداخل

▶ مثال

▶ جرّب الكود

(2) ارتداد

▶ مثال

▶ جرّب الكود

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

▶ مثال

▶ جرّب الكود

4. نصائح الأداء

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

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

transform (translate، scale، rotate)
opacity

تجنب تحريك:

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

خصائص هذا القسم: animation-duration animation-timing-function transform opacity width height margin padding box-shadow animation

❓ أسئلة شائعة

س ما الفرق بين @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).
أنشئ صفحة "تلاشي منزلق": العنوان ينزلق من الأعلى، الفقرة من الأسفل، الصورة من اليسار (رسوم مختلفة).
أنشئ زر "ضوء تنفسي" — سطوع الزر في دورة.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن