Как заставить проиграть css анимацию после клика по кноке до конца?

Question

[Капитан Какао]

Ребзя, есть такая вот кнопка "лайка" честно отработанная у твиттера)
При клики на неё срабатывает анимация, длительность анимации 1s. Но если кликнуть и держать кноку зажатой, всё ок, а если кликнуть и отпустить, то анимация не успевает отработать до конца.
Как сделать так, что бы при клике (даже если кликнул и сразу отпустил кнопку) анимация проиграла до конца?

https://jsfiddle.net/y36Lf07s/

Comments

[dpismenny]

Ну так можно при клике вешать класс и убирать его когда нужно.

Answer 1

[Александр]

раз
два
три
svg

Comments

[Данил Остапенко]

Офигенская анимация ! Случайно нашел добавил себе в папочку мастхев :3

Answer 2

[Алексей Струков]

Либо через джаваскрипт, либо через костыли
Выбирай)

Comments

[Капитан Какао]

Здаров кэп)

[Алексей Струков]

Rad Cor: выбирай)
Оба способа описывать лень)
Если джаваскрипт можно использовать - там одна строка кода (присвоить/убрать класс со свойством animation-play-state: paused;)

[Капитан Какао]

Алексей Струков: может тогда подскажешь как на jquery добавить класс и через секунду удалить его?

[Алексей Струков]

Rad Cor: тебе надо чтобы при нажатии ставился лайк с анимацией, а при повторном - сердечко снова становилось серым?

[Капитан Какао]

Алексей Струков: нет, я такой эффект буду ставить на кнопку "скачать".
То есть при клики на неё будут вылетать разные эффекты и по окончанию анимации она должна становится такой же как была в начале.

А в случае с лайком, после проигрывания анимации кнопка становится красной, типа говорит тебе что ты уже нажимал её

[Алексей Струков]

Rad Cor: на jquery незнаю как сделать. Вот на js примерно как должно быть:
https://jsfiddle.net/0gy22ozL/1/

Добавь эту функцию на сайт перед закрывающимся тегом body
Еще я подредактировал твой css немного для демонстрационных целей.
И при копировании функции, удали последнюю строку с комментарием.

[Капитан Какао]

Алексей Струков: спасибо большое)