Этот эффект привлекает внимание пользователя к важному элементу — например, к кнопке «отправить», когда форма заполнена с ошибкой, или к CTA, на который давно не кликали. Анимация создает ощущение «вибрации» или «дрожания», обычно влево-вправо или вверх-вниз.
Это статья из цикла заметок по CSS анимации и эффектам.
Как работает
Используем @keyframes для описания покадрового движения, и применим анимацию через свойство animation. В примере ниже кнопка будет слегка трястись влево и вправо.
Демка
Код на чистом CSS / HTML
|
1 |
<button class="shake">Отправить</button> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@keyframes css-animation-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } 100% { transform: translateX(0); } } .shake { animation: css-animation-shake 0.5s ease; } |
Улучшения и вариации
Чтобы анимация срабатывала по событию, например при нажатии или ошибке, можно добавить/удалить класс через JavaScript:
|
1 2 3 4 5 |
const button = document.querySelector('.shake'); button.addEventListener('click', () => { button.classList.remove('shake'); button.classList.add('shake'); }); |
Смысл манипуляции в том, чтобы затриггерить анимацию.
Можно настроить амплитуду (насколько сильно «трясти») и продолжительность. А можно сделать анимацию бесконечной, если нужно постоянное привлечение внимания:
|
1 2 3 |
.shake-loop { animation: shake 0.5s infinite; } |
Где уместно применять:
- Валидация форм (если данные введены неверно)
- Призыв к действию (CTA)
- Игровые интерфейсы
- Анимация для пустых или заблокированных кнопок (добавить «ошибочное» дрожание)