Правило @starting-style в CSS

Определение и использование

CSS @starting-style Правило используется для определения начального стиля элемента до первого обновления стиля элемента.

Это можно использовать для создания плавных эффектов входа и выхода для элементов, таких как всплывающие окна, модальные окна или любые элементы, которые становятся видимыми из состояния display: none.

Пример

Пример 1

Использование @starting-styleНачать коробку с прозрачностью 0 и опускать с вершины:

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

Попробуйте сами

Пример 2

Использование в диалоговых окнах и попапах @starting-style:

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

Попробуйте сами

Грамматика CSS

@starting-style {
  css-декларации;
}

Поддержка браузера

Числа в таблице показывают версию первого браузера, который полностью поддерживает это @ правило.