CSS: @starting-style یک قانون جدید و جالب

Summarize this content to 400 words in Persian Lang

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

بیایید یک پیام نان تست را به عنوان مثال در نظر بگیریم. برای نمایش آن به کاربر، دید آن را تغییر می دهیم، اما نتیجه این خواهد بود که بلافاصله ظاهر می شود. حالا می توانیم از جدید استفاده کنیم @starting-style قانون برای تعریف انیمیشن شروع برای این عنصر.

چند مثال ساده

بیایید از این HTML پایه، یک مستطیل ساده استفاده کنیم:

.container {
width: 10rem;
height: 10rem;
background-color: hotpink;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اضافه کردن اولیه background-color انتقال از آبی به صورتی

.container {
…
transition: background-color 4s;
}

@starting-style {
.container {
background-color: blue;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرخش را به مثال قبلی اضافه کنید

.container {
…
transition: transform 4s, background-color 4s;
transform: rotate(0deg);}
}

@starting-style {
.container {
background-color: blue;
transform: rotate(360deg);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به هر حال، شما ایده را دریافت می کنید. پنجره ها و منوهای خود را متحرک کنید یا یک لوگوی متحرک بسازید،سرراست است.

توجه

این ویژگی در حال حاضر در دسترس محدود است.

.container {
  width: 10rem;
  height: 10rem;
  background-color: hotpink;  
}

.container {
  ...
  transition: background-color 4s; 
}

@starting-style {
  .container {
    background-color: blue;
  }
}

.container {
  ...
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);} 
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}