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

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

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

Как работает

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

Демка

🌟

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

Стили:

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

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

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

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

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

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

Апрель 18, 2025 г.

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

Читать

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

Апрель 26, 2025 г.

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

Читать

Медленное вращение — добавим динамики логотипу

Апрель 24, 2025 г.

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

Читать

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

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

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

Читать
 

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

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



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