صياغة @keyframes وخاصية animation
حدّد خطوات الرسوم المتحركة باستخدام @keyframes وطبّقها باستخدام الصيغة المختصرة animation
صياغة @keyframes وخاصية animation درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما الرسوم المتحركة في CSS؟
تتيح الرسوم المتحركة في CSS تغيير قيم الخصائص على مراحل متعددة بمرور الوقت باستخدام @keyframes. وبخلاف الانتقالات، تبدأ الرسوم المتحركة تلقائيًا أو عند إضافة صنف، وتدعم تسلسلات معقدة.
صيغة @keyframes
حدد مراحل الحركة باستخدام النسب المئوية (من 0% إلى 100%) أو الكلمتين المفتاحيتين from/to:
<div class="fade-demo">Fades in</div>
<div class="pulse-demo"></div>
خاصية animation
طبّق رسمًا متحركًا على عنصر باستخدام الصيغة المختصرة animation أو خصائصها الفرعية:
<h1 class="hero-text">Welcome!</h1>
animation-name
تشير إلى قاعدة @keyframes باستخدام اسمها:
<div class="spinner"></div>
animation-duration
تحدد المدة التي تستغرقها دورة واحدة من الرسم المتحرك:
<div class="pulse"></div>
مراحل متعددة للحركة
استخدم إطارات keyframes بالنسب المئوية لإنشاء رسوم متحركة معقدة متعددة المراحل:
<div class="slide-demo">Sliding in</div>
تحريك خصائص متعددة
يمكن لكل مرحلة من مراحل keyframes تحريك خصائص متعددة في الوقت نفسه:
<div class="bounce-demo"></div>
animation-timing-function لكل keyframe
يمكن تعيين دالة التوقيت لكل مرحلة من مراحل keyframe، للتحكم في التدرج بين نقاط المسار الفردية بدلًا من التحكم في الرسم المتحرك بأكمله.
رسوم متحركة متعددة
طبّق عدة رسوم متحركة على عنصر واحد باستخدام قيم مفصولة بفواصل:
<div class="element">Two animations combined</div>
animation-play-state
أوقف الرسوم المتحركة مؤقتًا واستأنفها ديناميكيًا:
<div class="card">Hover the card to pause<div class="spinner"></div></div>
ملخص الرسوم المتحركة في CSS مقابل الانتقال
اختر بعناية:
- الانتقال: حالتان، يُستثار عند تغير الحالة، وبسيط
- الرسم المتحرك: مراحل متعددة، يبدأ تلقائيًا، قابل للتكرار، ويوفر تحكمًا أكبر
تحقق سريع
ما الكلمة المفتاحية في @keyframes التي تمثل حالة بدء الرسم المتحرك؟
مراجعة
حدد مراحل الرسم المتحرك باستخدام @keyframes مع نقاط مسار from/to أو النسب المئوية. طبّقه باستخدام الصيغة المختصرة animation، مع تحديد الاسم والمدة والتوقيت ووضع الملء. افصل الرسوم المتحركة المتعددة بفواصل. استخدم الانتقالات لتغييرات الحالة البسيطة ذات المرحلتين، والرسوم المتحركة للتسلسلات المعقدة.
الأسئلة الشائعة
هل درس «صياغة @keyframes وخاصية animation» مجاني؟
نعم — نص درس «صياغة @keyframes وخاصية animation» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «صياغة @keyframes وخاصية animation»؟
حدّد خطوات الرسوم المتحركة باستخدام @keyframes وطبّقها باستخدام الصيغة المختصرة animation تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «صياغة @keyframes وخاصية animation»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- صياغة @keyframes وخاصية animation
- اتجاه الحركة ووضع الملء والتكرار
- تسلسل الرسوم المتحركة وربطها
- رسوم متحركة ميسّرة باستخدام prefers-reduced-motion