Раньше, чтобы плавно анимировать появление элемента, который только что добавили в DOM, приходилось изворачиваться через requestAnimationFrame, setTimeout или тяжелые JS-библиотеки.
Теперь во всех современных браузерах работает нативный метод @starting-style
/* Исходное состояние элемента в DOM */
.dialog {
opacity: 1;
transform: scale(1);
transition: opacity 0.3s, transform 0.3s;
}
/* Свойства, из которых НАЧИНАЕТСЯ анимация при монтировании */
@starting-style {
.dialog {
opacity: 0;
transform: scale(0.9);
}
}
