Справочник HTML & CSS

@starting-style

Задаёт стили, с которых элемент начинает при первом появлении, чтобы `transition` анимировал его появление.

Синтаксис

@starting-style { selector { … } }

Примеры

Каждое новое сообщение выезжает:

<style>
  .toast { padding: 8px 12px; background: palegreen; transition: opacity 0.5s, translate 0.5s; }
  @starting-style {
    .toast { opacity: 0; translate: 0 20px; }
  }
</style>
 
<button onclick="this.insertAdjacentHTML('afterend', '<p class=toast>Saved!</p>')">Show a message</button>

Примечания

Без @starting-style переход не срабатывает у только что добавленного элемента или у переключённого с display: none. Поддерживается всеми актуальными браузерами с 2024 года; в остальных элемент просто появляется.

См. также

transition — Плавно анимирует изменение свойства от старого значения к новому.
::backdrop — Слой прямо под модальным `<dialog>` или элементом в полноэкранном режиме.
display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
transition-behavior — Разрешает переходы дискретных свойств вроде `display` и `overlay`, чтобы элемент успел плавно исчезнуть, прежде чем пропасть.

Вопросы и ответы по теме

В учебнике

Переходы — Плавная смена стилей с transition — длительность, задержка, функции плавности, что можно анимировать и где писать переход.

Спасибо, что читаете!