0Pricing
CSS Academy · درس

اتجاه الحركة ووضع الملء والتكرار

تحكّم في اتجاه تشغيل الحركة وعدد مرات تكرارها وحالتها النهائية باستخدام fill-mode

اتجاه الحركة ووضع الملء والتكرار درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

animation-iteration-count

تتحكم في عدد مرات تكرار الرسم المتحرك. استخدم infinite للتكرار المستمر.

<div class="spinner"></div>
<div class="pulse"></div>

animation-direction

تتحكم في اتجاه التشغيل أثناء الدورات البديلة:

  • normal — يُشغّل كل تكرار إلى الأمام
  • reverse — يُشغّل الحركة إلى الخلف
  • alternate — إلى الأمام ثم إلى الخلف بالتناوب
  • alternate-reverse — إلى الخلف ثم إلى الأمام
<div class="bounce"></div>

animation-fill-mode

تحدد ما يحدث للعنصر قبل بدء الرسم المتحرك وبعد انتهائه:

  • none — القيمة الافتراضية، يعيد العنصر إلى حالته الأصلية
  • forwards — يحتفظ بإطار keyframe الأخير بعد الاكتمال
  • backwards — يطبّق إطار keyframe الأول أثناء التأخير
  • both — يطبّق السلوكين للخلف وللأمام

وضع الملء forwards

حالة الاستخدام الأكثر شيوعًا هي إبقاء العنصر في حالته النهائية المتحركة بعد اكتمال الرسم المتحرك:

<p class="item">I fade in and stay visible</p>

وضع الملء backwards

عند وجود تأخير، يجعل backwards العنصر يبدأ بحالة إطار keyframe الأول أثناء فترة التأخير، مما يمنع ظهور وميض للحالة الأصلية قبل بدء الرسم المتحرك:

<p class="item">Starts invisible during the delay</p>

وضع الملء both

تجمع both بين سلوكي forwards وbackwards، وهي الخيار الأكثر قابلية للتنبؤ للعناصر المتحركة التي ينبغي ألا تومض قبل الرسم المتحرك أو بعده.

animation-delay

تؤخر بدء الرسم المتحرك. تجعل التأخيرات السالبة الرسم المتحرك يبدأ من منتصفه، وهو أمر مفيد لمزامنة عدة رسوم متحركة:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

نمط الرسوم المتحركة المتتابعة

إنشاء تأثير متتابع باستخدام CSS فقط وتأخيرات nth-child:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

الإيقاف المؤقت والاستئناف

بدّل حالة الرسم المتحرك باستخدام JavaScript عن طريق تغيير animation-play-state:

<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>

إعادة ضبط الرسوم المتحركة

لإعادة تشغيل رسم متحرك في CSS، أزل الصنف ثم أعد إضافته. ويطبّق المتصفح حيلة تتمثل في فرض إعادة التدفق بين الإزالة والإضافة.

<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>

animation-delay السالب

ابدأ الرسم المتحرك من منتصف التشغيل باستخدام تأخير سالب، وهو أمر مفيد لأنماط الخلفية المتزامنة أو العناصر المتكررة التي ينبغي أن تبدو وكأنها تتحرك بالفعل.

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

تحقق سريع

ما قيمة animation-fill-mode التي تُبقي العنصر عند حالة إطار keyframe الأخير بعد انتهاء الرسم المتحرك؟

مراجعة

تجعل animation-iteration-count: infinite الرسم المتحرك يتكرر بلا نهاية. وتنتج animation-direction: alternate حركة ترددية. وتحافظ animation-fill-mode: forwards على الحالة النهائية. أما animation-fill-mode: both فهي الخيار الأكثر أمانًا. استخدم التأخيرات السالبة لإزاحة الرسوم المتحركة المتزامنة.

الأسئلة الشائعة

هل درس «اتجاه الحركة ووضع الملء والتكرار» مجاني؟

نعم — نص درس «اتجاه الحركة ووضع الملء والتكرار» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «اتجاه الحركة ووضع الملء والتكرار»؟

تحكّم في اتجاه تشغيل الحركة وعدد مرات تكرارها وحالتها النهائية باستخدام fill-mode تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «اتجاه الحركة ووضع الملء والتكرار»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. صياغة @keyframes وخاصية animation
  2. اتجاه الحركة ووضع الملء والتكرار
  3. تسلسل الرسوم المتحركة وربطها
  4. رسوم متحركة ميسّرة باستخدام prefers-reduced-motion
← العودة إلى CSS Academy