قانون @starting-style CSS

تعریف و استفاده

CSS @starting-style این قانون برای تعریف استایل اولیه عنصر قبل از اینکه آن عنصر اولین به‌روزرسانی استایل خود را دریافت کند، استفاده می‌شود.

این می‌تواند برای ایجاد انتقال‌های نرم و آرام برای عناصر مانند پاپ‌آپ، پنجره‌های موقت یا هر عنصری که از حالت display: none به حالت قابل مشاهده تغییر می‌کند، استفاده شود.

مثال

مثال 1

استفاده از @starting-styleبه جعبه با شفافیت 0 شروع کنید و از بالا به پایین بیفتید:

.box {
  عرض: 150 پیکسل;
  ارتفاع: 150 پیکسل;
  رنگ پس‌زمینه: صورتی;
  شفافیت: 1;
  گذر زمان: همه 0.9 ثانیه آسان;
  @starting-style {
    شفافیت: 0;
    ترجمه: 0 -80 پیکسل;
  }
}

آزمایش کنید

مثال 2

در پاپ‌آپ و دیالوگ‌ها استفاده می‌شود @starting-style:

#myPopover {
  گذر زمان: شفافیت 0.5 ثانیه آسان، مقیاس 0.5 ثانیه آسان;
  @starting-style {
    شفافیت: 0;
    مقیاس: 1.1;
  }
}
#myDialog {
  گذر زمان: شفافیت 0.5 ثانیه آسان، مقیاس 0.5 ثانیه آسان;
  @starting-style {
    شفافیت: 0;
    مقیاس: 1.1;
  }
}

آزمایش کنید

نحوه نوشتن CSS

@starting-style {
  تعریف css;
}

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این @قانون را کامل پشتیبانی می‌کند.