Анимацию CSS (в совокупности с @-webkit-keyframes) не так просто "перезапустить", как может казаться. Допустим, мы запустим анимацию один раз:

.run-animation {
   -webkit-animation: my-fancy-animation 5s once;
}

И она используется, например, для логотипа компании:

<h1 id="logo" class="run-animation">
    Нажми меня
</h1>

А потом по каким-то причинам вам надо запустить ее еще раз, например по нажатию клавиши на элементе. Способа CSS для того, чтобы выкинуть анимацию и снова ее загрузить нет (по крайней мере, в узких рамках осведомлённости автора). Можно использовать JavaScript (jQuery), чтобы удалить и повторно добавить заданный класс:

$("#logo").click(function() {
      // А вот не работает!
      $(this).removeClass("run-animation").addClass("run-animation");
});

Что в действительности нужно сделать, так это удалить элемент со страницы полностью и повторно его вставить. Вот простенький пример на jQuery. Клонируем элемент, вставляем перед оригиналом, а оригинал удаляем.

$("#logo").click(function() {  
 
          var el     = $(this),
          newone = el.clone(true);
 
          el.before(newone);
 
          $("." + el.attr("class") + ":last").remove();
 
});

Добавлено: 16 Мая 2018 18:24:01 Добавил: Андрей Ковальчук Нравится 0

Добавить