Анимация «Прыгающий элемент» (bounce)

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

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

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

Анимация основана на изменении вертикального положения элемента с помощью transform: translateY() и ключевых кадров @keyframes. Важно задать правильный ритм, чтобы эффект выглядел естественно.

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

Пример HTML + CSS

Стили:

Вариации

Можно использовать animation-iteration-count: 1; если нужно воспроизвести эффект один раз, например, при загрузке страницы (как в демке).

Эффект хорошо работает с hover, если ты хочешь, чтобы прыжок происходил только при наведении:

Где уместно применять

  • Кнопки призыва к действию (Call to Action)
  • Уведомления или бейджи
  • Элементы геймификации
  • Интерактивные иконки

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

Поворот иконки при наведении

Апрель 22, 2025 г.

Небольшая анимация при наведении — отличный способ добавить интерактивности и "отзывчивости" вашему интерфейсу. Один из самых простых и эффектных вариантов — поворот иконки. Это статья из цикла заметок по CSS анимации и эффектам. Где это типично ...

Читать

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

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

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

Читать

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

Май 1, 2025 г.

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

Читать

Эффект бегущей строки на CSS

Апрель 24, 2025 г.

Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS. ...

Читать
 

Комментарии к «Анимация «Прыгающий элемент» (bounce)»

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



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