جاري التحميل...

الرسوم المتحركة في CSS

درس الانتقالات علّمك من A إلى B عند محفّز. درس Transform حدّد أين يذهب الصندوق المرسوم. الرسوم المتحركة تكتب خطاً زمنياً: نبض نقطة حالة، دوران loader بلا توقف، دخول البطاقات واحدةً واحدة — بـ @keyframes للخطوات وanimation للتشغيل.

ما هي الرسوم المتحركة؟

للحركة جزآن: مجموعة keyframes مسماة (@keyframes) تسرد الأنماط عند النسب المئوية (أو from / to)، وقاعدة تشغّل ذلك الاسم بمدة، وتأخير اختياري، وعدد تكرار، واتجاه، ودالة توقيت، وfill-mode. المتصفح يُكمل القيم بين محطات الـ keyframe.

تطابق الاسم صارم: animation-name: pulse يعمل فقط إذا وُجد @keyframes pulse. غيّر أحد الاسمين دون الآخر — ولن يتحرّك شيء.

عناصر التحكم في لمحة

📊 أجزاء الرسوم المتحركة الأساسية

الجزء الدور
@keyframes name { … } خط زمني لقيم الخصائص عند % / from / to
animation-name أي مجموعة keyframes تُشغَّل
animation-duration مدة دورة واحدة (s أو ms)
animation-timing-function تنعيم داخل الدورة (ease، linear، …)
animation-delay انتظار قبل الدورة الأولى
animation-iteration-count عدد الدورات (number أو infinite)
animation-direction normal، reverse، alternate، alternate-reverse
animation-fill-mode أنماط قبل/بعد (none، forwards، backwards، both)
animation shorthand name → duration → timing → delay → iteration → direction → fill-mode (ترتيب شائع)

نادراً ما تحتاج كل longhand معاً. ابدأ بالاسم + المدة؛ أضف infinite للـ loaders، وalternate للارتداد، وforwards عندما يجب أن يبقى آخر keyframe.

أول خط زمني — نبض هادئ

opacity وtransform ودودان على طبقة الرسم. النبض الناعم تمرين كلاسيكي لأول @keyframes.

نبض حالة ناعم مع @keyframes

css 
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.55;
transform: scale(0.92);
}
}

.status-dot {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #16a34a;
animation: pulse 1.4s ease-in-out infinite;
}

0% و100% متطابقان ليُغلق الحلقة بسلاسة. infinite يُبقي الدورة — مناسب لمؤشر حالة صغير؛ مزعج إن حرّكت hero كامل الصفحة.

دوران بلا نهاية — الـ loaders تحب linear

الدوران مع linear وinfinite يُقرأ كـ spinner متواصل. أرفق مساراً لـ prefers-reduced-motion يخفّي الدوران أو يجمّده.

حلقة loader بدوران infinite

css 
@keyframes spin {
to {
transform: rotate(360deg);
}
}

.loader {
width: 2rem;
height: 2rem;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
.loader {
animation: none;
border-top-color: #e5e7eb;
}
}

to اختصار لـ 100%. البدء من 0% الافتراضي (بدون transform) يكفي عندما يهمّك نهاية الدورة فقط.

التأخير والتدريج — نفس keyframes، بدايات مختلفة

مجموعة keyframes واحدة يمكن أن تُحرّك عناصر كثيرة. وزّع البدايات بـ animation-delay ليشعر القائمة بالتتابع دون كتابة ثلاث رسوم متحركة مختلفة.

fade-up متدرج على عناصر القائمة

css 
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(0.75rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.reveal-list li {
opacity: 0;
animation: fade-up 0.45s ease forwards;
}

.reveal-list li:nth-child(1) { animation-delay: 0s; }
.reveal-list li:nth-child(2) { animation-delay: 0.08s; }
.reveal-list li:nth-child(3) { animation-delay: 0.16s; }

forwards يُبقي أنماط آخر keyframe بعد انتهاء الدورة — بدونه قد تعود العناصر إلى opacity: 0 من القاعدة. هنا animation-fill-mode يعمل فعلياً.

fill-mode لدخول لمرة واحدة

حركات الدخول غالباً تُشغَّل مرة. fill-mode يقرّر ما إذا تُطبَّق الأنماط قبل التأخير وبعد الإطار الأخير.

دخول بطاقة مع fill-mode both

css 
@keyframes card-in {
from {
opacity: 0;
transform: translateY(1rem) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.card-enter {
animation: card-in 0.5s ease 0.1s both;
}

الاختصار هنا: الاسم card-in، المدة 0.5s، التنعيم ease، التأخير 0.1s، fill-mode both. both يطبّق أول keyframe أثناء التأخير ويُثبت الأخير بعدها.

الاتجاه وحالة التشغيل ومتى لا تُحرّك

animation-direction: alternate يُشغّل الدورات الفردية للأمام والزوجية للخلف — مفيد لارتداد لطيف دون تكرار keyframes. animation-play-state: paused يجمّد رسوماً قيد التشغيل (مثلاً إيقاف مؤقت عند hover للحلقات الزخرفية).

لتغيير لون hover بسيط، ابقَ على transitions. استخدم الرسوم المتحركة عندما تحتاج حلقات، أو قصة متعددة الخطوات، أو حركة غير مربوطة بتبديل حالة واحد. فضّل transform وopacity داخل keyframes؛ تحريك width أو height أو top أثقل وغالباً يهزّ التخطيط.

جرّب بنفسك

  1. ابنِ نبضاً بثلاث محطات (0% / 50% / 100%) على opacity فقط؛ ثم أضف scale صغيراً.
  2. اصنع spinner بـ spin + linear + infinite؛ بدّل إلى ease ولاحظ عدم التساوي.
  3. وزّع ثلاث badges بنفس keyframes fade-up وتأخيرات 0s، 0.1s، 0.2s — قارن مع وبدون forwards.
  4. استخدم الاختصار animation: card-in 0.5s ease 0.15s both على لوحة؛ أزل both وراقب العودة المفاجئة.
  5. تحت prefers-reduced-motion: reduce، ضع animation: none (أو fade قصير واحد) على الحلقات الزخرفية.

أخطاء شائعة

  • توقّع أن fade hover من A إلى B «يتكرر» — هذا مجال الرسوم المتحركة، لا transition وحيد
  • خطأ مطابقة بين animation-name واسم @keyframes — صمت تام
  • infinite على مناطق كبيرة جاذبة للانتباه دون خطة إيقاف أو reduced-motion
  • تحريك خصائص التخطيط (width، margin، top) بينما يكفي transform/opacity
  • نسيان forwards / both على reveals لمرة واحدة تبدأ من opacity: 0 في القاعدة

ملخص

  • @keyframes تحدّد الخط الزمني؛ animation (أو longhands) تشغّله
  • استخدم التكرار والاتجاه والتأخير وfill-mode للحلقات والارتداد والتدريج والنهايات الثابتة
  • فضّل transform/opacity؛ احترم prefers-reduced-motion للحركة الزخرفية
  • transitions للتغييرات البسيطة؛ الرسوم المتحركة للخطوات المتعددة والتكرار
  • التالي في Effects & Motion: CSS Filters

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 61 من 63
Css درس تعليمي