Эффект подпрыгивания делает элемент визуально более «живым» и может привлечь внимание пользователя, особенно если использовать его на кнопке, иконке или уведомлении.
Это статья из цикла заметок по CSS анимации и эффектам.
Как работает bounce
Анимация основана на изменении вертикального положения элемента с помощью transform: translateY() и ключевых кадров @keyframes. Важно задать правильный ритм, чтобы эффект выглядел естественно.
Выглядит — это так (анимация начинается каждый раз при загрузке страницы).
Пример HTML + CSS
|
1 2 3 |
<button class="bounce"> Подпрыгни! </button> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@keyframes css-animation-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-15px); } 50% { transform: translateY(0); } 70% { transform: translateY(-7px); } 90% { transform: translateY(0); } } .bounce { animation: css-animation-bounce 1s ease infinite; } |
Вариации
Можно использовать animation-iteration-count: 1; если нужно воспроизвести эффект один раз, например, при загрузке страницы (как в демке).
Эффект хорошо работает с hover, если ты хочешь, чтобы прыжок происходил только при наведении:
|
1 2 3 |
button:hover { animation: css-animation-bounce 0.6s ease infinite; } |
Где уместно применять
- Кнопки призыва к действию (Call to Action)
- Уведомления или бейджи
- Элементы геймификации
- Интерактивные иконки