مدة خاصية الانتقال وتوقيته
حدّد الخصائص التي تنتقل، والمدة التي تستغرقها، ووقت بدئها باستخدام delay
مدة خاصية الانتقال وتوقيته درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما انتقال CSS؟
يُجري انتقال CSS استيفاءً بين قيمتين لخاصية ما خلال مدة محددة عند تغيّر القيمة، مثلًا عند تمرير المؤشر. ولا حاجة إلى JavaScript.
transition-property
يحدد خصائص CSS التي ستتحرك. استخدم all لانتقال كل الخصائص القابلة للتحريك، أو اذكر خصائص محددة.
<button>Save changes</button>transition-duration
يحدد مدة الانتقال. ويقبل قيمًا زمنية بالثواني (s) أو بالمللي ثانية (ms).
<div class="card">Card</div>الصيغة المختصرة لـ transition
تجمع خصائص الانتقال الفرعية الأربع: property | duration | timing-function | delay.
<button class="btn">Submit</button>انتقالات متعددة
أدرج انتقالات متعددة مفصولة بفواصل لتحريك خصائص مختلفة بصورة مستقلة:
<div class="card">Card</div>transition-delay
يؤخر بدء الانتقال. ويفيد ذلك في ترتيب الرسوم المتحركة أو إتاحة اكتمال انتقال قبل بدء انتقال آخر.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>الانتقال في الحالة الأساسية
ضع خاصية transition دائمًا في الحالة الأساسية، وليس في حالة :hover. ويضمن ذلك تشغيل الانتقال عند دخول المؤشر وخروجه.
<button class="btn demo-active">Hover me</button>ما الخصائص التي يمكن انتقالها؟
يمكن إجراء انتقال لمعظم خصائص CSS الرقمية، مثل الألوان، والأبعاد، والشفافية، والتحويلات، وغير ذلك. أما الخصائص المتقطعة، مثل display، فلا يمكن إجراء استيفاء سلس لها، بل تنتقل فجأة.
تحذير بشأن transition: all
قد يؤدي استخدام transition: all إلى رسوم متحركة غير متوقعة لخصائص لا تنوي تحريكها. حدّد دائمًا الخصائص صراحةً في كود الإنتاج.
إجراء انتقالات للألوان
تُجرى الاستيفاءات في انتقالات الألوان بين القيم. استخدم تنسيق اللون نفسه للحصول على أفضل النتائج:
<button class="btn demo-active">Hover me</button>الانتقالات وإجهاد التخطيط
تجنب إجراء انتقالات لخصائص تؤدي إلى تشغيل التخطيط، مثل width وheight وmargin وpadding، لتحسين الأداء. فهي تسبب إعادة حساب التخطيط في كل إطار من إطارات الرسوم المتحركة. استخدم transform وopacity بدلًا منها.
تحقق سريع
أين ينبغي وضع خاصية transition لضمان تشغيلها عند دخول المؤشر وخروجه؟
مراجعة
تجعل انتقالات CSS تغييرات الخصائص سلسة بمرور الوقت باستخدام transition-property وduration وtiming-function وdelay. ضع الانتقالات في الحالة الأساسية لتحقيق رسوم متحركة في الاتجاهين. فضّل قوائم الخصائص المحددة على all لتحسين الأداء وزيادة القدرة على التنبؤ.
تعلم CSS مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «مدة خاصية الانتقال وتوقيته» مجاني؟
نعم — نص درس «مدة خاصية الانتقال وتوقيته» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «مدة خاصية الانتقال وتوقيته»؟
حدّد الخصائص التي تنتقل، والمدة التي تستغرقها، ووقت بدئها باستخدام delay تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «مدة خاصية الانتقال وتوقيته»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مدة خاصية الانتقال وتوقيته
- دوال التمهيد: ease وlinear وcubic-bezier
- إجراء انتقالات لخصائص متعددة
- الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم