Записки HTML-верстальщика: анимированный колокольчик (CSS + минимум JS)

Приветствую всех пользователей проекта Голос!

В этой статье я хотел бы поделиться небольшой анимацией, которая, уверен, пригодится Вам в разработке какого-нибудь собственного сайта.

Я расскажу как сделать очень легко и просто анимированный колокольчик, который можно использовать в кнопках, заголовках, всплывающих окнах... да вообще везде!

Для начала нам нужна картинка самого колокольчика. В нашем примере будем использовать этот (да, он белого цвета):

Ссылка на него здесь

Сразу расскажу про результат сего действия: сделаем мы обыкновенную кнопку, а её результат будет выглядеть так:

Естественно, колокольчик у нас будет анимирован. Готовый пример Вы можете посмотреть и потестировать по этой ссылке

Немного расскажу о том, что же мы там натворили:

Структура нашей кнопки до неприличности проста:

<button>Перезвонить<i></i></button>

Не буду вдаваться в мелкие подробности касательно стилей для оформления кнопки и иконки. Остановлюсь подробней на стилях для анимации колокольчика:

Сама анимация колокольчика на CSS выглядит так:

@keyframes icon-bell {
  0% {transform: rotate(-15deg);}
  10% {transform: rotate(15deg);}
  20% {transform: rotate(-18deg);}
  30% {transform: rotate(18deg);}
  40% {transform: rotate(-22deg);}
  50% {transform: rotate(22deg);}
  60% {transform: rotate(-18deg);}
  70% {transform: rotate(18deg);}
  80% {transform: rotate(-12deg);}
  90% {transform: rotate(12deg);}
  100% {transform: rotate(0deg);}
}

Здесь всё просто - мы заставляем нашу иконку поворачиваться на определенный градус. Немного сложнее обстоит дело в том, чтобы заставить эту иконку двигаться точно как колокольчик, да еще и останавливаться время от времени.

Запускать анимацию время от времени нам поможет совсем немного знаний JS:

setInterval(function() {
$('i').toggleClass('active');
}, 3000);

Мы добавляем/удаляем класс active для нашей иконки с интервалом в 3 секунды. Остался нерешенным один вопрос: а что же у нас за свойства у класса active? Вот они:

     animation-name: icon-bell;
    animation-duration: 0.75s;
    animation-timing-function: linear;
    animation-iteration-count: 3;

animation-name: свойство, которое указывает на имя анимации, которое будет срабатывать.
animation-duration: свойство, которое показывает время длительности одного цикла анимации.
animation-timing-function: свойство, которое показывает при помощи какой математический функции запускать нашу анимацию (к примеру, равномерно от 0 до 100%, начиная быстро и заканчивая медленно, начиная медленно и заканчивая быстро и т.п.). В нашем случае будет равномерная линейная функция. Анимация будет происходить равномерно на всех отрезках времени.
animation-iteration-count: свойство, которое указывает сколько раз наша анимация будет срабатывать. В нашем случае анимация три раза пройдет весь свой цикл, и выключится. Именно для того, чтобы запустить эти три повторения еще раз, мы и дописываем небольшой JS-скрипт, который бесконечно будет её запускать.

На этом всё,

Спасибо за внимание :)

Буду рад ответить всем на Ваши вопросы, буду рад видеть всех и каждого у себя в подписчиках, буду признателен за Ваши лайки и отзывы.

167