Добрый день. Помогите, пожалуйста. Есть css анимация. Возможно ли сделать так,

Question

Добрый день. Помогите, пожалуйста. Есть css анимация. Возможно ли сделать так,

чтобы при убирании класса анимация доигрывалась до начального фрейма?
Пробовал разные комбинации transition, но толку мало.
Уверен, должно быть какое-то простое решение на css.
Пример https://jsbin.com/cejuyeqica/edit?html,css,output
Сейчас анимация резко прерывается, если убрать курсор. И это надо как-то поправить.

#css #frontend #html #programming #russian

0

11.02.2021

7 ответов

10 просмотров

Eduard 🎸 Mavliutov

Погуглил ваш вопрос https://stackoverflow.com/questions/7694323/css3-animation-on-hover-force-entire-animation

0

11.02.2021

LZD

Eduard 🎸 Mavliutov
Погуглил ваш вопрос https://stackoverflow.com/ques...

там немного не то у него анимация бесконечная

0

11.02.2021

Роман Климов

LZD
там немного не то у него анимация бесконечная

У вас тоже бесконечная Уточните подробнее, какое поведение ожидается

0

11.02.2021

Андрей Автор вопроса

Eduard 🎸 Mavliutov
Погуглил ваш вопрос https://stackoverflow.com/ques...

Пример немного синтетический. Вообще проблема возникла на живом проекте, который на реакте и лезть жаваскриптом в реальный дом лишний раз не хотелось бы. По сути это что-то сродни анимации ожидания ввода пользователя в том смысле, что класс удаляется не по таймеру, а по событию от пользователя. В принципе, накостылять кодом это дело я, вероятно смогу. Но надеялся, вдруг есть какое-то известное решение на чистом css. Проблема кажется типовой так-то.

0

11.02.2021

LZD

Роман Климов
У вас тоже бесконечная Уточните подробнее, какое п...

у меня ваще никакая. ожидается что после того как убираешь курсор анимация проигрывается до конца

0

11.02.2021

Андрей Автор вопроса

Я тут немного сам себе отвечу на случай, если у кого-то вдруг будет похожая проблема. На чистом CSS это судя по всему не решается. На жс набросал такое решение: https://jsfiddle.net/84zu6qwb/ По клику на объекте анимация останавливается после того, как доиграет до конца. Без полифилов в ие не работает, но в остальном вроде кроссбраузерно. Хотя animation api сырое, и, наверное, его трогать не стоит.

0

12.02.2021

Eduard 🎸 Mavliutov · Accepted Answer

Eduard 🎸 Mavliutov

Первое , что пришло в голову : повесить на этот элемент событие blur с setTimeout , равным продолжительности анимации , и класс с анимацией удалять по истечении таймаута

0

11.02.2021

169 похожих чатов

Добрый день. Помогите, пожалуйста. Есть css анимация. Возможно ли сделать так,

7 ответов

Похожие вопросы