Frontend Academy · درس

الرسوم المتحركة باستخدام @keyframes

عرّف رسومًا متحركة متعددة الخطوات باستخدام @keyframes، واربطها باستخدام صيغة animation المختصرة، وتحكّم في التكرار والاتجاه وfill-mode.

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

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

تحرّك الانتقالات بين حالتين عند حدوث تغيير. أما رسوم @keyframes المتحركة فتعمل تلقائيًا، ويمكنها التكرار والعكس والتشغيل بلا نهاية، كما تتيح تحديد عدة خطوات وسيطة — ولا تتطلب محفزًا.

تعريف @keyframes

أعلنوا عن تسلسل الحركة باستخدام @keyframes. حدّدوا الحالات عند نسب مئوية مثل (0% و50% و100%)، أو باستخدام الكلمتين المفتاحيتين from وto.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

الصيغة المختصرة لـ animation

animation: name duration timing-function delay iteration-count direction fill-mode. طبّقوا الحركة على عنصر باستخدام هذه الصيغة المختصرة.

.card {
  animation: fadeIn 0.4s ease-out forwards;
}

.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

animation-iteration-count

تحدد عدد مرات تشغيل الحركة. تجعل infinite الحركة تتكرر إلى ما لا نهاية، بينما يشغّل الرقم الحركة ذلك العدد المحدد من المرات تمامًا.

.spinner {
  animation: spin 1s linear infinite;
}

.badge {
  animation: bounce 0.6s ease 3; /* plays 3 times */
}

animation-direction

normal (الافتراضي): إلى الأمام في كل مرة. reverse: إلى الخلف. alternate: إلى الأمام ثم إلى الخلف. alternate-reverse. وتناسب alternate تأثيرات الحركة ذهابًا وإيابًا.

@keyframes swing {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}
.pendulum {
  animation: swing 1s ease-in-out infinite alternate;
}

animation-fill-mode

تتحكم في حالة العنصر قبل الحركة وبعدها. forwards: يبقى العنصر على حالة الإطار المفتاحي النهائي. backwards: تطبّق حالة from أثناء التأخير. both: يطبّق الحالتين.

.entrance {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
  /* stays visible (opacity: 1) after animation ends */
}

animation-play-state

أوقفوا الرسوم المتحركة مؤقتًا واستأنفوها باستخدام JavaScript عبر تبديل animation-play-state: paused | running.

// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';

رسوم متحركة متعددة

طبّقوا عدة رسوم متحركة على عنصر واحد عبر فصلها بفواصل. تعمل كل حركة بصورة مستقلة.

.icon {
  animation:
    rotate 2s linear infinite,
    pulse 1.5s ease-in-out infinite alternate;
}

رسوم متحركة متتابعة باستخدام animation-delay

رتّبوا عناصر القائمة زمنيًا بزيادة التأخير لكل عنصر. وتسهّل خصائص CSS المخصصة ذلك عند استخدامها مع JavaScript.

/* CSS */
.list-item {
  animation: slideIn 0.3s ease forwards;
  animation-delay: calc(var(--index) * 60ms);
}

/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--index', i);
});

will-change — تلميح للمتصفح

تلمّح will-change: transform إلى المتصفح بأن الخاصية ستتحرك، مما يتيح له ترقية العنصر إلى طبقة تركيب خاصة به مسبقًا. استخدموها باعتدال — فكثرة طبقات التركيب تهدر ذاكرة GPU.

.animated {
  will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');

تطبيقي: شاشة تحميل هيكلية

تستخدم الشاشات الهيكلية حركة بريق للإشارة إلى أن المحتوى قيد التحميل. وينزلق تدرّج لوني عبر الأشكال النائبة.

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #edf2f7 50%,
    #e2e8f0 75%
  ) 200% 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

تحقق سريع

ما قيمة animation-fill-mode التي تجعل العنصر يحتفظ بحالة الإطار المفتاحي النهائي بعد انتهاء الحركة؟

مراجعة: رسوم @keyframes المتحركة

عرّفوا الحركة باستخدام @keyframes، إما بـ from وto أو بالنسب المئوية. طبّقوها باستخدام الصيغة المختصرة لـ animation. استخدموا iteration-count للتكرار، واتجاه alternate للحركة ذهابًا وإيابًا، وfill-mode: forwards للاحتفاظ بالحالة النهائية. رتّبوا الحركات باستخدام animation-delay ومتغيرات CSS. استخدموا إطارات keyframes لـ transform وopacity للحصول على رسوم متحركة سلسة مركّبة.

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

هل درس «الرسوم المتحركة باستخدام @keyframes» مجاني؟

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

ماذا ستتعلم في «الرسوم المتحركة باستخدام @keyframes»؟

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

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

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

كم من الوقت يستغرق درس «الرسوم المتحركة باستخدام @keyframes»؟

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

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

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

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

← العودة إلى Frontend Academy