Плавное появление элемента при загрузке

Здесь мы разберем CSS анимацию — плавное проявление элемента.

Это статья из цикла заметок по CSS анимации и эффектам.

Это одна из самых простых и универсальных анимаций. Она используется, чтобы элементы мягко появлялись на экране, создавая ощущение плавности и живости интерфейса.

Где используется:

— Карточки товаров
— Заголовки и тексты при загрузке страницы
— Блоки контента в лэндингах
— Элементы галереи

Выглядит — это так (анимация начинается каждый раз при загрузке страницы).

Карточка 1
Карточка 2
Карточка 3
Карточка 4

Пример HTML + CSS

Стили:

Как это работает

  • opacity: 0 — элемент изначально невидим.
  • transform: translateY(20px) — немного смещаем его вниз.
  • animation — применяем анимацию fadeInUp на 0.6 секунды, с функцией плавного замедления (ease-out) и флагом forwards, чтобы сохранить конечное состояние.
  • В @keyframes описываем, как элемент станет видимым и вернётся на своё место.

Вариации

Можно поменять направление откуда идет появление блока — например, слева/справа:

Задержка для поочерёдного появления (как это сделано в демке):

В реальном проекте скорее всего вы будете использовать transition вместо animation, т.к. анимацию нужно будет активировать когда, элемент появляется на экране (например, при скролле с добавлением класса через JS).

Мало букафф? Читайте есчо !

Слайд-ин: элемент "въезжает" с края

Апрель 29, 2025 г.

Этот эффект часто используют для появления блоков на странице при загрузке или при прокрутке — например, когда карточка товара "въезжает" с левой или правой стороны. Он создаёт ощущение динамики и привлекает внимание. Это статья из цикла заметок по ...

Читать

CSS-анимация: Эффект пульсации

Май 1, 2025 г.

Пульсация — это визуальный эффект, при котором элемент плавно увеличивается и уменьшается, имитируя дыхание или сердцебиение. Этот эффект привлекает внимание, но остаётся достаточно мягким, чтобы не раздражать пользователя. Это статья из цикла заметок ...

Читать

Анимация свечения (мерцание)

Апрель 18, 2025 г.

Здесь мы разбираем CSS анимацию - мерцание. Это статья из цикла заметок по CSS анимации и эффектам. Эта анимация создаёт эффект мягкого свечения вокруг элемента, будто он излучает свет. Часто используется для привлечения внимания к кнопкам, ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать
 

Комментарии к «Плавное появление элемента при загрузке»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: