Reverse CSS-Animation auf: Hover

Question

Ich versuche, eine Animation rückwärts zu machen, wenn Sie ein Element schweben. Es funktioniert nicht, ich verstehe nicht warum und wie ich es zum Laufen bringen kann. Die "Animation" springt einfach ohne Animation auf Keyframe 0% zurück.

Das Snippet funktioniert nur wie vorgesehen in Chrome und 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>

Dies ist nur ein extrem vereinfachtes Beispiel, also bitte nicht nicht-Animation Methoden vorschlagen (außer vielleicht eine Animation mit einem Übergang auf :hover kombiniert, die ich versuchte, und konnte auch nicht zur Arbeit kommen).

Dies ist viel näher an den realen Welt Code: https://codepen.io/connexo/pen/eBxMqO

Ich bin auch nicht interessiert in Javascript-basierten Lösungen, nur CSS.

Answer 1

Anstatt reverse zu verwenden, habe ich gerade eine andere Animation erstellt, die die Umkehrung Ihrer aktuellen ist.

Ich habe es gefällt: 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>

Korrektur: reverse in Safari-Desktop unterstützt: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

---

Das ist mein gue ss auf das Sprungverhalten mit 'reverse' - Animation für Keyframe a wird nicht wieder beim Schweben gespielt.

Die Animation von Keyframe a ist nach 2 Sekunden auf 100%. Jetzt bewegen Sie Ihre Maus in. Mit dem Effekt reverse, a bei 100% ist jetzt 0%, wodurch es kleiner wird. Aber da Keyframe a bereits abgespielt wird, springt das Div nur auf 0% statt auf 100%.