Как правильно обработать завершение css-анимации?

Question

[Александр Цымбал]

Добрый день, тостерчане.

Вопрос интересный.
Есть элемент, который при наведении на него мышкой, начинает анимироваться: js ему добавляет класс, для которого прописаны кейфреймы - всё стандартно.

Пример в jsfiddle (живой пример test7.tsymbal.su/service.php ). Наведите мышкой на колесо справа над блоком "Резка труб".
Элемент циклично вращается, до тех пор пока мы не отводим мышку в сторону. Класс удаляется и, соответственно, элемент резко возвращается в исходное положение.
А хотелось бы, чтобы:
а) анимация сохранялась до завершения полного круга, и, в итоге элемент возвращался бы к первоначальному состоянию, а затем останаливался.
б) происходило плавное замедление и остановка на любом кадре.

Принимаются любые наводки, костыли (в т.ч. иноязычные), лайфхаки, новые стандарты css. :)

Comments

[sim3x]

Сделайте песочницу на jsfiddle

[Александр Цымбал]

sim3x, обязательно сделаю, чуть позже. отпишусь.

[Александр Цымбал]

sim3x, добавил песочницу

Answer 1

[Stalker_RED]

Убрать js

В css прописать элементу бесконечную анимацию и при этом
animation-play-state: paused;

При hover менять paused на running


Если хотите имено на js, то анимацию однократно и

elem.addEventListener("animationend", function() {
  // проверяем нужно ли запускать анимацию на новый цикл, или уже всё
})

Comments

[Александр Цымбал]

для разовой анимации - самое оно. а если у нас бесконечный цикл?

[Stalker_RED]

Александр Цымбал, изменил ответ.

[Александр Цымбал]

Stalker_RED, спасибо, вроде как дельно. протестирую, отпишусь обязательно!