Как запретить обратную анимацию при снятии мышки с элемента?

Question

[BorisNaumov]

Всех приветствую.

Подскажите, пожалуйста, есть такой пример flip анимации карточки https://www.w3schools.com/howto/howto_css_flip_card.asp

При событии hover она поворачивается направо в 3Д пространстве, можно ли сделать как-то на чистом CSS, чтобы при снятии мышки с карточки, она не возвращалась обратно налево, а поворачивалась дальше направо к первой картинки?

https://codepen.io/PollyCatZ/pen/GRGbPpw вот тут почти добился на кейфреймах то, что нужно, но не до конца, может кто-то подскажет что нужно поправить?

Answer 1

[Александр Цымбал]

Да, без @keyframes не обойтись.
При отводе мыши сначала доводим rotateY до 360 (чтобы анимация продолжалась вправо), а затем очень быстро сбрасываем с 360 до 0 - так карточка незаметно перейдёт в первоначальное состояние.

UPD спустя 3 месяца :) Набрёл на этот вопрос и решил "победить" проблему: https://codepen.io/tsymbal_su/pen/vYrqLJP - как и писал ранее, нужно использовать @keyframes с очень быстрой сменой финального состояния на дефолтное

Comments

[BorisNaumov]

Благодарю за ответ! Блин, как только не пробовал, получается фигня https://codepen.io/PollyCatZ/pen/GRGbPpw
Не могли бы, пожалуйста, подсказать, что не так делаю?

[Александр Цымбал]

BorisNaumov, возможно, слишком поздно, но кинул вам ссылку на решение в своём первом ответе.

Answer 2

[Ludov]

@keyframes в помощь.
на MDN