Директива
@starting-style — это такой способ указать браузеру, какие стили у элемента должны быть в тот момент, когда он только появился на странице. И если у него ещё есть указанный transition, то можно сотворить красивую анимацию появления.Джош Комо подсвечивает нюансы такого подхода:
- Стили внутри
@starting-style имеют ту же специфичность, что и селектор, для которого они объявлены. Что, в целом, логично. Но ломает работу с инлайн-стилями, например.- Когда в стилях появляется
!important, то поддержка становится ещё веселее.В общем, классические проблемы со специфичностью и каскадом. Джош в статье предлагает решения этих проблем. Правда, в конце приходит в выводу, что ему пока проще использовать обычные анимации через
@keyframes.Имхо, оба подхода создают какие-то трудности. Анимации так-то тоже могут перебить стили, которые ты не ожидаешь нечаянно затереть, потому что у них очень высокий приоритет над почти любыми другими стилями. Но, справедливости ради, я пока ни разу в своих проектах
@starting-style не применял, как-то не было нужды.https://www.joshwcomeau.com/css/starting-style/
