Долгое время плавное появление модалок, тултипов или выпадашек с display: none было головной болью. Браузер просто не успевал проиграть анимацию при переключении — элемент уже отображался, а transition не срабатывал. Приходилось городить костыли с setTimeout или requestAnimationFrame. В production это особенно критично для лендингов и кабинетов, где часто встречается всплывашка с плавным появлением.
Как это работает
В CSS появилось решение — @starting-style. Это директива, которая задаёт начальные стили для момента, когда элемент появляется в DOM или display меняется с none на что-то видимое. Элемент висит с display: none. При смене, скажем, на block, браузер сначала применяет стили из @starting-style, а затем переходит к обычным. Если у элемента прописаны transition или @keyframes — анимация проигрывается.
Пример production-кода
.popup {
display: none;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s ease, transform 0.3s ease;
}
@starting-style {
.popup {
opacity: 0;
transform: scale(0.8);
}
}
.popup.is-open {
display: block;
opacity: 1;
transform: scale(1);
}После добавления класса .is-open элемент плавно появляется, а при удалении — скрывается. Где пригодится: модальные окна, тултипы, дропдауны, появление элементов при клике или переключении вкладок.
Типичная ошибка и trade-offs
Если у элемента в обычном состоянии уже прописаны opacity: 0 или transform: scale(0.8), @starting-style может не сработать. Нужно убедиться, что display: none задан явно, иначе браузер проигнорирует директиву. Поддержка: Chrome 117+, Safari 17.2. Firefox пока в разработке. Работает и с transition, и с @keyframes. Можно указывать несколько селекторов внутри @starting-style. Практический совет: тестируй анимацию в Chrome DevTools с ручным переключением display — это помогает отловить сценарии, когда @starting-style не применяется из-за каскада.
Вывод: @starting-style — это инженерный шаг к чистому CSS без JS-обвязки для анимации элементов с display: none, устраняющий визуальную регрессию при монтировании.
