Обратная анимация CSS: hover

Question

Я пытаюсь сделать обратную анимацию при падении элемента. Это не работает, я не понимаю, почему и как заставить его работать. «Анимация» просто возвращается к ключевому кадру 0% без анимации.

Фрагмент работает только в соответствии с требованиями Chrome и Safari.

http://codepen.io/anon/pen/YpBaZq

div { 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-duration: 2s; 
 
    animation-name: a; 
 
    background-color: #a00; 
 
    display: inline-block; 
 
    padding: 50px; 
 
} 
 

 
div:hover { 
 
    -webkit-animation-fill-mode: backwards; 
 
    animation-duration: 2s; 
 
    animation-name: a; 
 
    animation-direction: reverse; 
 
} 
 

 
@keyframes a { 
 
    0% { 
 
    padding: 50px; 
 
    } 
 
    100% { 
 
    padding: 100px 200px; 
 
    } 
 
}

<div></div>

Это просто очень упрощенный пример, поэтому, пожалуйста, не предложить методы без анимации (за исключением, может быть, анимации в сочетании с переходом на :hover, который я попытался и не мог работать).

Это гораздо ближе к реальному коду: https://codepen.io/connexo/pen/eBxMqO

Я также не заинтересован в Javascript на основе решений, только CSS.

Answer 1

Вместо использования reverse Я только что создал другую анимацию, которая является обратной вашей текущей.

Я сделал это понравилось: http://codepen.io/anon/pen/zoeWLO

div { 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-duration: 2s; 
 
    animation-name: a; 
 
    background-color: #a00; 
 
    display: inline-block; 
 
    padding: 50px; 
 
} 
 

 
div:hover { 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-duration: 2s; 
 
    animation-name: ra; 
 
} 
 

 
@keyframes a { 
 
    0% { 
 
    padding: 50px; 
 
    } 
 
    100% { 
 
    padding: 100px 200px; 
 
    } 
 
} 
 

 
@keyframes ra{ 
 
    0% { 
 
     padding: 100px 200px; 
 
    } 
 
    100% { 
 
    padding: 50px; 
 
} 
 
}

<div></div>

Коррекция: reverse поддерживается в Safari Desktop: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

---

Это мой GUE ss на поведение прыжка с использованием «reverse» - анимация для ключевого кадра a снова не воспроизводится при зависании.

Анимация ключевого кадра a составляет 100% через 2 секунды. Теперь вы перемещаете свою мышь. С эффектом reverse, a на 100% теперь 0%, что делает его уменьшающимся. Но так как ключевой кадр a уже выполнен, div просто прыгнет на 0% вместо перехода на 100%.