Плавное появление контента вместо мгновенного скачкообразного отображения — приём, который часто используют, чтобы страница ощущалась более отполированной и продуманной. Элементы будто аккуратно проявляются на экране, а не появляются все разом резким рывком.
Простейший вариант — задать элементу нулевую прозрачность и небольшое смещение в начальном состоянии, а затем через анимацию или добавление класса перевести его в прозрачность единица и нулевое смещение. Этого достаточно для лёгкого и приятного эффекта появления без сложной механики.
Для нескольких элементов подряд, например пунктов списка или карточек, часто используют небольшую задержку между ними через animation-delay, чтобы они появлялись не одновременно, а последовательно, друг за другом с небольшим интервалом — это выглядит более естественно, чем синхронное появление всех сразу.
Стоит быть аккуратным с длительностью и количеством одновременно анимируемых элементов — если анимируется буквально всё на странице и подолгу, пользователь может почувствовать, что сайт медленно грузится, даже если на самом деле контент давно готов и просто ждёт своей анимации.
Анимацию появления при прокрутке, когда блок анимируется не сразу при загрузке, а в момент попадания в видимую область экрана, реализуют через Intersection Observer в JavaScript вместе с CSS-переходами — сам CSS не умеет отслеживать положение элемента относительно окна просмотра.
Важно учитывать пользователей, которые в настройках операционной системы включили уменьшение движения — медиазапрос prefers-reduced-motion позволяет отключить или упростить подобные анимации именно для них, не затрагивая остальных посетителей.
Про уважительное отношение к настройкам движения и как их учитывать в CSS рассказано в статье про prefers-reduced-motion на MDN.
