تسلسل الرسوم المتحركة وربطها
أنشئ تسلسلات معقدة بربط رسوم متحركة متعددة مع فواصل تأخير متدرجة
تسلسل الرسوم المتحركة وربطها درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
لماذا نسلسل الرسوم المتحركة؟
غالبًا ما تتطلب تأثيرات واجهة المستخدم المعقدة عدة رسوم متحركة تحدث بترتيب معين: ينزلق عنصر إلى الداخل، ثم يتوقف مؤقتًا، ثم يتلاشى. يوفر CSS عدة أدوات لربط الرسوم المتحركة دون استخدام JavaScript.
استخدام animation-delay للتسلسل
أبسط طريقة للتسلسل هي حساب وقت بدء الرسم المتحرك التالي استنادًا إلى مدة الرسم السابق:
<div class="element">Slides in, then fades out</div>
إطارات keyframes متعددة المراحل
النهج الأنظف لعنصر واحد هو ترميز التسلسل بأكمله في قاعدة @keyframes واحدة باستخدام نقاط مسار ذات نسب مئوية:
<div class="toast">Notification toast</div>
خصائص CSS المخصصة للمدة
خزّن المدد في متغيرات CSS لتسهيل تنسيق الرسوم المتحركة المرتبطة:
<div class="box">Custom-property-driven timing</div>
animation-timeline (حديثة)
تتيح Web Animations API والرسوم المتحركة المرتبطة بالتمرير (ScrollTimeline) إنشاء تسلسلات متقدمة دون حسابات التأخير. وهذا هو مستقبل تنسيق الرسوم المتحركة المعقدة في CSS.
التتابع باستخدام خصائص CSS المخصصة
أنشئ تأخيرات التتابع اعتمادًا على خصائص CSS المخصصة التي تُعيّن مضمنة أو عبر JavaScript:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
التسلسل المدفوع بـ JavaScript
لإنشاء تسلسلات دقيقة متعددة العناصر، استخدم Web Animations API أو مكتبة مثل GSAP. يظل CSS وحده محدودًا في تنسيق العناصر المستقلة التي تتضمن تبعيات معقدة فيما بينها.
رسوم متحركة لجذب الانتباه
تسلسل رسوم متحركة لجذب الانتباه، يبدأ بنبضة ثم يستقر:
<div class="notification">New message!</div>
حدث AnimationEnd
استمع إلى animationend في JavaScript لتشغيل الخطوة التالية برمجيًا:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
نمط انتقال الصفحة
تسلسل انتقال لصفحة باستخدام CSS وتبديل الأصناف:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
هيكل حالة التحميل
رسم متحرك متعدد المراحل لهيكل التحميل باستخدام الإزاحات:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
تحقق سريع
ما أفضل طريقة لترميز تسلسل كامل متعدد المراحل لرسم متحرك لعنصر واحد في CSS؟
مراجعة
يستخدم تسلسل الرسوم المتحركة في CSS تأخيرات مضبوطة وفق مدد الرسوم السابقة، أو قواعد @keyframes متعددة المراحل مع نقاط مسار ذات نسب مئوية، أو متغيرات مدة في الخصائص المخصصة. ويتيح حدث animationend تشغيل مراحل متتابعة عبر JavaScript. أما لتنسيق عدة عناصر معقدة، ففكر في استخدام Web Animations API.
الأسئلة الشائعة
هل درس «تسلسل الرسوم المتحركة وربطها» مجاني؟
نعم — نص درس «تسلسل الرسوم المتحركة وربطها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «تسلسل الرسوم المتحركة وربطها»؟
أنشئ تسلسلات معقدة بربط رسوم متحركة متعددة مع فواصل تأخير متدرجة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «تسلسل الرسوم المتحركة وربطها»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- صياغة @keyframes وخاصية animation
- اتجاه الحركة ووضع الملء والتكرار
- تسلسل الرسوم المتحركة وربطها
- رسوم متحركة ميسّرة باستخدام prefers-reduced-motion