Трясущаяся кнопка (shake effect)

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

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

Как работает

Используем @keyframes для описания покадрового движения, и применим анимацию через свойство animation. В примере ниже кнопка будет слегка трястись влево и вправо.

Демка

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

Стили:

Улучшения и вариации

Чтобы анимация срабатывала по событию, например при нажатии или ошибке, можно добавить/удалить класс через JavaScript:

Смысл манипуляции в том, чтобы затриггерить анимацию.

Можно настроить амплитуду (насколько сильно «трясти») и продолжительность. А можно сделать анимацию бесконечной, если нужно постоянное привлечение внимания:

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

  • Валидация форм (если данные введены неверно)
  • Призыв к действию (CTA)
  • Игровые интерфейсы
  • Анимация для пустых или заблокированных кнопок (добавить «ошибочное» дрожание)
Написать комментарий

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

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

Апрель 24, 2025 г.

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

Читать

Эссе «добро вокруг меня» GTPChat v4 исходный вариант

Май 1, 2023 г.

Другие версии здесь. В мире, который часто кажется мрачным и отрицательным, легко потерять из виду то добро, которое окружает нас повсюду. Однако, если мы найдем время посмотреть вокруг, мы обязательно найдем примеры доброты, сострадания и позитива ...

Читать

 

Комментарии к «Трясущаяся кнопка (shake effect)»

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



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