Почему не работает animation без infinite?

Question

[DTX]

codepen.io/DTX/pen/qZzBMy

.img:hover {
    animation: pulse 1s infinite;
}
.img2:hover {
    animation: pulse 1s;
}

Первая картинка обрабатывается нормально, а вторая не хочет.

Comments

[Lynn «Кофеман»]

Потому что эта анимация уже отработала свой один раз. У вас анимация добавляется по классу pulse

[DTX]

Алексей Тен: Т.е. без JS не обойтись?

[Lynn «Кофеман»]

DTX: Обойтись, если понимать что и зачем писать.

Надо убрать у картинок класс pulse и всё будет работать

[DTX]

Алексей Тен: Теперь понял, спасибо! Мб ответ добавишь, а его лучшим сделаю?)

Answer 1

[Lynn «Кофеман»]

Проблема в том, что класс pulse в подключённом animate.css уже задаёт анимацию картинке и она отрабатывает сразу на загрузке. Добавление animation в img2:hover на самом деле ничего не меняет, поэтому анимация не запускается заново.

Надо убрать класс pulse у картинок и всё будет работать как надо.