Этот эффект создаёт иллюзию, будто элемент «плавает» в воздухе — мягко покачиваясь вверх и вниз. Он отлично подходит для украшений, иконок, стрелок прокрутки или просто акцентов, которые должны привлекать внимание, но не быть слишком навязчивыми.
Это статья из цикла заметок по CSS анимации и эффектам.
Как работает
Мы используем @keyframes, чтобы задать цикл движения, и применяем его к элементу через свойство animation. Обычно для такого эффекта меняется только вертикальная позиция элемента (transform: translateY(...)).
Демка
🌟
Код на чистом CSS / HTML
|
1 |
<div class="float">🌟</div> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes css-animation-float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .float { display: inline-block; animation: css-animation-float 3s ease-in-out infinite; } |
Что можно настраивать
- translateY(-10px) — насколько сильно элемент поднимается. Можно увеличить до -20px или уменьшить до -5px.
- animation-duration: 3s — продолжительность полного цикла. Чем больше, тем медленнее.
- ease-in-out — функция сглаживания. Для более естественного движения лучше использовать её или cubic-bezier.
Дополнительно:
- Добавьте
will-change: transform;к анимируемому элементу, чтобы ускорить отрисовку и повысить производительность. - Не используйте анимацию на слишком многих элементах сразу — это может перегрузить браузер на слабых устройствах.