يمكنك إنشاء انتقالات CSS3 وتعديلها وحذفها باستخدام اللوحة CSS Transitions.

لإنشاء انتقال CSS3، قم بإنشاء فئة انتقالات بتحديد قيم خصائص العنصر. عند تحديد أحد العناصر قبل إنشاء فئة انتقالات، يتم تطبيق فئة الانتقالات على العنصر المحدد.

يمكنك اختيار إضافة رمز CSS تم إنشائه للمستند الحالي أو تحديد ملف CSS خارجي.

إنشاء تأثير انتقال CSS3 وتطبيقه

  1. (اختياري) حدد عنصرًا (فقرة أو عنوان أو غيرهما) تريد تطبيق الانتقال عليه. أو بدلاً عن ذلك يمكنك إنشاء انتقال وتطبيقه لاحقًا على أحد العناصر.

  2. حدد Window > CSS Transitions.

  3. انقر فوق .

  4. قم بإنشاء فئة انتقالات باستخدام خيارات مربع الحوار New Transition.

    Target Rule

    أدخل اسمًا للمحدد. يمكن أن يكون المحدد أي من محددات CSS مثل العلامات أو القواعد أو المعرفات أو محددات مركبة. على سبيل المثال، عند الرغبة في إضافة تأثيرات انتقال لكل علامات  <hr>، أدخل hr

    Transition On

    حدد إحدى الحالات التي تريد تطبيقها على الانتقال. على سبيل المثال عند الرغبة في تطبيق الانتقال عند نقل مؤشر الماوس فوق العنصر، استخدم الخيار hover.

    استخدم نفس الانتقال لجميع الخصائص

    حدد هذا الخيار عند الرغبة في تحديد نفس Duration وDelay وTiming Function لكل خصائص CSS المطلوب تطبيق الانتقال عليها.

    استخدم انتقال آخر لكل خاصية

    حدد هذا الخيار عند الرغبة في تحديد نفس Duration وDelay وTiming Function لكل خصائص CSS المطلوب تطبيق الانتقال عليها.

    Property

    انقر فوق  لإضافة خاصية CSS لانتقال.

    Duration

    أدخل مدة زمنية بالثواني أو الميللي ثانية لتأثير الانتقال.

    Delay

    الوقت، بالثواني أو الميلي ثانية، قبل بدء تأثير الانتقال.

    وظيفة التوقيت

    حدد نمط انتقال من الخيارات المتاحة.

    End Value

    القيمة النهائية لتأثير لانتقال. على سبيل المثال، عند الرغبة في زيادة مقاس الخط إلى 40 بيكسل عند نهاية تأثير الانتقال، حدد 40 بيكسل في خاصية مقاس الخط.

    Choose Where To Create The Transition

    لتضمين النمط في المستند الحالي، حدد This Document Only.

    عند الرغبة في إنشاء أوراق أنماط خارجية لرمز CSS3، حدد New Style Sheet File. عند النقر فوق Create Transition، يطلب منك موقعًا لحفظ ملف CSS الجديد. بعد إنشاء أوراق الأنماط، تتم إضافتها إلى القائمة Choose Where To Create Transition.

تحرير التأثيرات الانتقالية في CSS3

  1. في اللوحة CSS Transitions، حدد تأثير الانتقال المطلوب تحريره.

  2. انقر فوق  .

  3. استخدم الحوار Edit Transition لتغيير القيم المدخلة سابقًا للانتقال.

تعطيل اختصار CSS للانتقالات

  1. حدد Edit > Preferences.

  2. حدد CSS Styles.

  3. في Use Shorthand For، قم بإلغاء تحديد Transition.


تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت