规则 na'na' @starting-style na'na' CSS

التعريف والاستخدام

css @starting-style القاعدة تستخدم لتحديد النمط الأولي للعنصر قبل أن يتم تحديث النمط الخاص به للمرة الأولى.

يمكن استخدام هذه القاعدة لإنشاء تأثيرات انتقال سلسة عند تحويل العناصر من حالة display: none إلى حالة مرئية مثل النوافذ المنبثقة أو النوافذ الحوارية أو أي عنصر آخر.

مثال

مثال 1

استخدام @starting-styleلجعل الصندوق يبدأ بالشفافية 0 ويبدأ في السقوط من الأعلى:

.box {
  العرض: 150px;
  الارتفاع: 150px;
  لون الخلفية: أرجواني;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    ترجمة: 0 -80px;
  }
}

تجربة شخصية

مثال 2

استخدامها في النوافذ المنبثقة والنوافذ الحوارية @starting-style:

#myPopover {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

تجربة شخصية

نحو الجملة css

@starting-style {
  بيانات الإعلان css;
}

دعم المتصفح

الرقم في الجدول يعني إصدار المتصفح الذي يدعم بشكل كامل @ القاعدة الأولي.