إجراء انتقالات لخصائص متعددة
طبّق انتقالات على خصائص CSS متعددة في الوقت نفسه باستخدام قيم مفصولة بفواصل
إجراء انتقالات لخصائص متعددة درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
لماذا نستخدم انتقالات لخصائص متعددة؟
غالبًا ما تتضمن تفاعلات واجهة المستخدم الحقيقية تغيّر عدة خصائص في الوقت نفسه، مثل لون الخلفية والظل والحجم عند تمرير المؤشر. يدعم CSS التسهيل والمدة المستقلين لكل خاصية.
انتقالات مفصولة بفواصل
أدرج انتقالات متعددة باستخدام فاصلة. ويطبَّق كل إدخال على خاصية واحدة بصورة مستقلة:
<div class="card">Card</div>مدد مختلفة لكل خاصية
امنح كل خاصية سرعة مختلفة للحصول على إحساس طبيعي متعدد الطبقات:
<button class="btn">Hover-ready button</button>دوال تسهيل مختلفة لكل خاصية
اخلط دوال التسهيل لتجعل إحساس كل خاصية ملائمًا لها:
<div class="modal">Modal content</div>سلبيات transition: all
يعني استخدام transition: all حصول كل خاصية متغيرة على التوقيت نفسه. وقد يسبب ذلك رسومًا متحركة غير مرغوبة لخصائص ينبغي أن تنتقل فجأة، مثل تغييرات display أو position.
الانتقالات القابلة للمقاطعة
يمكن مقاطعة انتقالات CSS. فإذا انتهت حالة التحويم أثناء الانتقال، ينعكس الانتقال بدءًا من القيمة المتحركة الحالية، لا من الحالة النهائية. وينتج عن ذلك انعكاس سلس دون قفزات مفاجئة.
تنسيق الدخول والخروج
استخدم مددًا مختلفة للتحويم إلى الداخل والتحويم إلى الخارج من خلال تجاوز الانتقالات في حالة :hover:
<div class="card demo-active">Card</div>التتابع باستخدام التأخير
أضف تأخيرات متزايدة إلى العناصر الشقيقة لإنشاء تأثير ظهور متتابع:
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>الخصائص المخصصة في CSS للتتابع
عيّن تأخير التتابع من خاصية مخصصة في CSS تُضبط عبر JavaScript أو HTML:
<div class="item">Item</div>الانتقال مقابل الرسم المتحرك
استخدم الانتقالات للتغييرات ثنائية الحالة مثل الخمول ← التحويم. واستخدم الرسوم المتحركة في @keyframes للتسلسلات متعددة الخطوات، أو التأثيرات المتكررة، أو الرسوم المتحركة التي تبدأ تلقائيًا.
تحسين Will-change
أعطِ المتصفح تلميحًا بشأن الخصائص التي ستتحرك، للسماح بالتحسين المسبق. استخدم ذلك باعتدال، لأنه يستهلك ذاكرة GPU.
<div class="card">Card</div>تحقق سريع
يحتوي أحد البطاقات على transition: background 150ms, transform 250ms في الحالة الأساسية. ماذا يحدث عند تمرير المؤشر إذا حرّك المستخدم المؤشر بعيدًا بسرعة أثناء الرسم المتحرك؟
مراجعة
تتيح الانتقالات المفصولة بفواصل تحديد مدة ومنحنى تسارع وتأخير خاص بكل خاصية. تجنب transition: all، إذ قد يؤدي إلى تحريك خصائص غير مقصودة. يمكن مقاطعة الانتقالات، كما تعكس اتجاهها بسلاسة من موضعها الحالي. استخدم التأخيرات لإنشاء تأثيرات متتابعة.
الأسئلة الشائعة
هل درس «إجراء انتقالات لخصائص متعددة» مجاني؟
نعم — نص درس «إجراء انتقالات لخصائص متعددة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «إجراء انتقالات لخصائص متعددة»؟
طبّق انتقالات على خصائص CSS متعددة في الوقت نفسه باستخدام قيم مفصولة بفواصل تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «إجراء انتقالات لخصائص متعددة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مدة خاصية الانتقال وتوقيته
- دوال التمهيد: ease وlinear وcubic-bezier
- إجراء انتقالات لخصائص متعددة
- الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم