Как реализовать запуск css анимации по клику на button?

Question

[Brain Storm]

Добрый день, дамы и господа!
Хочу попросить у вас совета: что мне нужно сделать с css animation, так, чтобы она запускалась по клику на button?

Comments

[Brain Storm]

желательно без js

Answer 1

[Brain Storm]

classList.add

Answer 2

[snater]

Вынести в отдельный класс конечное состояние анимируемого элемента и по клику добавлять к нему этот класс

Comments

[Brain Storm]

а можно код???

[snater]

Что то около этого jsfiddle.net/garmashnikolay/hjwW5

[Brain Storm]

а без$

[snater]

Обновил фидл

[snater]

Сори, не сохранил. Вот здесь jsfiddle.net/garmashnikolay/Lq62x/1

[Brain Storm]

не робит

Answer 3

[Aleksandr Kriuchkov]

Вряд ли вам поможет, но вот разные фокусы вообще без js: jsfiddle.net/85Ypv

Answer 4

[Максим Гречушников]

Сделал перевод статьи по анимациям для начинающих. От и до расписано что для чего. Живые примеры тут же в тексте. Можно копировать и вставлять сразу к себе на сайт.

Вам нужно animation-play-state

devdocs.ru/verstka/css3-animations-for-beginners

Comments

[Виолетта Морозова]

Блин, чувак! теперь это уже 404. Можешь как-нить обновить ссылку? может ты еще где выкладывал перевод?

[Максим Гречушников]

devdocs.ru/2014/12/css3-animations-for-beginners

[Ivan Komarov]

да ведь там порнушка сейчас

Answer 5

[brineb]

@keyframes /* название анимации*\{
100%{/* действие анимации*\}
}

.div:hover{
animation-fill-mode: forwards;
animation-play-state: ;
animation-name: /* название анимации*\;
animation-duration: 15s;
animation-timing-functio: cubic-bezier(0, 0.1, 0.2, 1) ;
}