Плавающее движение вверх-вниз с помощью CSS

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

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

Как работает

Мы используем @keyframes, чтобы задать цикл движения, и применяем его к элементу через свойство animation. Обычно для такого эффекта меняется только вертикальная позиция элемента (transform: translateY(...)).

Демка

🌟

Код на чистом CSS / HTML

Стили:

Что можно настраивать

  • translateY(-10px) — насколько сильно элемент поднимается. Можно увеличить до -20px или уменьшить до -5px.
  • animation-duration: 3s — продолжительность полного цикла. Чем больше, тем медленнее.
  • ease-in-out — функция сглаживания. Для более естественного движения лучше использовать её или cubic-bezier.

Дополнительно:

  • Добавьте will-change: transform; к анимируемому элементу, чтобы ускорить отрисовку и повысить производительность.
  • Не используйте анимацию на слишком многих элементах сразу — это может перегрузить браузер на слабых устройствах.

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

Изменение цвета кнопки при наведении

Апрель 21, 2025 г.

Здесь мы разберем CSS анимацию - изменение цвета при наведении (:hover). Это статья из цикла заметок по CSS анимации и эффектам. Одним из самых простых и эффективных способов оживить интерфейс — сделать так, чтобы кнопка меняла цвет, когда ...

Читать

Анимация: Поднятие элемента с тенью при наведении

Апрель 26, 2025 г.

Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)). Это статья из цикла заметок ...

Читать

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

Апрель 29, 2025 г.

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

Читать

Эффект увеличения элемента при наведении

Апрель 22, 2025 г.

Здесь мы разберем CSS анимацию - увеличения элемента при наведении (:hover + scale). Это статья из цикла заметок по CSS анимации и эффектам. Одна из самых простых и популярных анимаций, она действует следующим образом: при наведении элемент ...

Читать
 

Комментарии к «Плавающее движение вверх-вниз с помощью CSS»

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



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