Некоторые сайты используют интересный эффект: когда на странице появляется что-то новое, оно сначала имеет какой-то цветной фон, обычно желтоватый, который потом переходит в прозрачный. Это довольно старая техника, но она всё ещё живее всех живых. Где-то вместо цвета используется прозрачность, где-то — увеличение элемента.
Раньше для подобных трюков мы задавали новому элементу какой-то класс с привлекающими внимание стилями, дожидались окончания анимации появления в JavaScript, а потом убирали класс.
Сейчас всё ещё нужно делать так же, но скоро появится новый способ делать это исключительно средствами CSS. У Брамуса есть хороший пример, с которым всё становится понятнее.
div {
transition: background-color 0.5s;
background-color: transparent;
@starting-style {
background-color: yellow;
}
}
В этом примере сначала у дива будет жёлтый фон, потом за 0.5 секунды он станет прозрачным. Никакого JavaScript, исключительно магия CSS.
Пока что эта возможность доступна только пользователям Chrome Canary 115+ с включёнными экспериментальными флагами веб-платформы. Правило настолько свежее, что caniuse про него просто не знает, а в спецификации CSS Transitions даже в черновике пока про такую возможность ещё ничего не написано. Но раз Chrome потихоньку внедряет, скоро появится и спецификация.
https://www.bram.us/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/
