Как анимировать появление элемента на странице?
Ну, можно воспользоваться трюком с ключевыми кадрами, но вещь это не самая интуитивная и не сработает при изменении атрибутов, например.
А можно написать т. н. стартовые стили! Буквально
@starting-style. А в базовых стилях уже прописать нужное нам положение и переход. Например: /* Before the dialog opens */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
Таким образом мы получаем анимацию из display: none или при изменении любого атрибута. Да, чтобы анимировать display none нужно в описание перехода добавить allow-discrete, поскольку display none не поддерживает плавные переходы, но это детали.
Ссылка на блог разработчиков Chrome: https://web.dev/blog/baseline-entry-animations?hl=en
И очень много примеров есть на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Технически, starting style поддерживается уже во всех браузерах (в Firefox вот только появился, в 129). Тем не менее, переходы и анимации на удаление элемента из DOM пока нать не везде, к сожалению.
В общем, можно потихоньку начинать использовать.
#css #transition