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

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

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

Как работает

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

Демка

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

Стили:

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

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

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

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

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

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

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

Ветвления и циклы чертежника

Январь 7, 2021 г.

Язык программирования не может обойтись без управляющих элементов вроде условий и циклов. Даже такой простой как 'чертежник Джек'. Условный оператор Эта конструкция использует ЕСЛИ - КОНЕЦ ЕСЛИ синтаксис, чтобы выполнить инструкции внутри неё, ...

Читать

Эссе «добро вокруг меня» GTPChat от лица старца 3x летнего ребенка

Май 1, 2023 г.

Другие версии здесь. Я замечаю, как мама и папа всегда улыбаются мне и делают мне приятные вещи, это так здорово! А ещё, когда я играю с моими игрушками, то иногда делятся с другими детьми, это тоже добро! И когда на улице встречаю собачек, то ласкаю ...

Читать

Немного о чертежнике Джеке

Январь 6, 2021 г.

Об идее, командах и уроках программирования для малышей. Идея проекта Давным-давно, когда я учился в школе, несколько уроков информатики прошли ...

Читать

Медленное вращение — добавим динамики логотипу

Апрель 24, 2025 г.

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

Читать
 

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

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



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