Здесь мы разберем CSS анимацию — плавное проявление элемента.
Это статья из цикла заметок по CSS анимации и эффектам.
Это одна из самых простых и универсальных анимаций. Она используется, чтобы элементы мягко появлялись на экране, создавая ощущение плавности и живости интерфейса.
Где используется:
— Карточки товаров
— Заголовки и тексты при загрузке страницы
— Блоки контента в лэндингах
— Элементы галереи
Выглядит — это так (анимация начинается каждый раз при загрузке страницы).
Пример HTML + CSS
|
1 2 3 |
<div class="fade-in"> Карточка </div> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.fade-in { opacity: 0; transform: translateY(20px); animation: css-animation-fadeInUp 0.6s ease-out forwards; } @keyframes css-animation-fadeInUp { to { opacity: 1; transform: translateY(0); } } |
Как это работает
opacity: 0— элемент изначально невидим.transform: translateY(20px)— немного смещаем его вниз.animation— применяем анимациюfadeInUpна 0.6 секунды, с функцией плавного замедления (ease-out) и флагомforwards, чтобы сохранить конечное состояние.- В
@keyframesописываем, как элемент станет видимым и вернётся на своё место.
Вариации
Можно поменять направление откуда идет появление блока — например, слева/справа:
|
1 |
transform: translateX(-20px); /* вместо Y */ |
Задержка для поочерёдного появления (как это сделано в демке):
|
1 |
animation-delay: 0.3s; |
В реальном проекте скорее всего вы будете использовать transition вместо animation, т.к. анимацию нужно будет активировать когда, элемент появляется на экране (например, при скролле с добавлением класса через JS).