Как на jQuery можно добавить класс к блоку после того, как анимация прошла полный цикл?

Question

[ymfront]

Есть следующий блок (колесо) сразу с анимацией:

@keyframes new-wheel-shake-1 {
    0% {
        transform: rotate(-1040deg)
    }
    50% {
        transform: rotate(-1048deg)
    }
    100% {
        transform: rotate(-1040deg)
    }
}

.shake1 {
	animation: new-wheel-shake-1 2s ease-in-out infinite;
}

Тут сразу при загрузке страницы колесо вращается влево/вправо без остановки.

Мне при клике на кнопку нужно удалить класс .shake1 и добавить класс .rotate1, чтобы колесо начало крутиться:

@keyframes rotate {
	100% {
		transform: rotate(2160deg);
	}
}

.rotate1 {
	animation: rotate 4s ease-in-out forwards;
}

Но при добавлении класса происходит скачек, так как углы поворота колеса разные.

Можно ли как-то добавить класс .rotate1 после полного прохождения цикла .shake1, чтобы не было скачка?

Answer 1

[Виталий Першин]

Есть пример без jquery

Comments

[ymfront]

Не очень понятно :-(
Есть пример с документацией, что тут используется?

[Виталий Першин]

ymfront,
Событие "animationend" - это событие окончания анимации, дальше думай как это использовать

[ymfront]

Виталий Першин, у меня нет конца анимации, она зациклена - infinite

[Виталий Першин]

ymfront, Можно повторять анимацию через js