قاعدة @starting-style 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;
}

دعم المتصفح

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