CSS-Animation, Hintergrund im Schwebeflug einblenden, bleiben und nach einer Verzögerung zum vorherigen zurückkehren

Question

Sagen wir, ich habe ein HTML-Element, das mit Transparenz rot ist. Wenn ich das Element schwenke, sollte es ein solides Rot werden. Wenn ich das Element nicht mehr schwebe, sollte es in den ersten Zustand zurückkehren, aber erst nach X Sekunden.

So weit so gut, siehe Code-Schnipsel.

Mein Problem ist, wenn ich höre, das Element zu schweben und dann zurück zu schweben. Die anfängliche Animation beginnt erneut, aber es wurde noch keine Animation zum Anfangszustand gestartet und daher gibt es einen unschönen Sprung von Vollfarbe zu Transparenz und dann zu Vollfarbe.

Gibt es eine Möglichkeit, dies ohne JavaScript zu lösen?

Dann, indem Sie den Hintergrund des div auf die Vollfarbe setzen die Farbe, wenn nicht schwebend gehalten wird. Aber es setzt es auch auf die Anfangsfarbe. Wie kann ich das lösen? Entfernen entfernt nur die Farbe, wenn Sie nicht schweben!

Opazität mit einem Übergang ist keine Option, da ich Inhalt in diesem Div haben.

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: rgba(50, 60, 95, 1); 
 
    animation-name: fadeItOut; 
 
    animation-duration: 1s; 
 
    animation-delay: 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
div:hover { 
 
    animation-name: fadeItIn; 
 
    animation-duration: 1s; 
 
    animation-delay: 0s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes fadeItIn { 
 
    0% { 
 
    background: rgba(50, 60, 95, 0.3); 
 
    } 
 
    100% { 
 
    background: rgba(50, 60, 95, 1); 
 
    } 
 
} 
 

 
@keyframes fadeItOut { 
 
    0% { 
 
    background: rgba(50, 60, 95, 1); 
 
    } 
 
    100% { 
 
    background: rgba(50, 60, 95, 0.3); 
 
    } 
 
}

<div></div>

Answer 1

Ich glaube, Sie durch die Verwendung animation komplizierte Dinge haben können, wenn ein transition die bessere Wahl gewesen wäre. Animationen haben einen Start- und Endpunkt (die 0% und 100% Keyframes). Wenn Sie also ein- oder ausblenden, wird das Element zuerst auf den Status 0% gesetzt (da die Animationsrichtung normal ist) und dann zum Schlüsselbild 100% . Wenn Sie den Mauszeiger schnell ein- oder ausblenden (bevor die vorherige Animation abgeschlossen ist), werden diese Sprünge immer aufgrund der Einstellung von 0% Keyframes angezeigt.

Die unten sollte das sein, was Sie brauchen:

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: rgba(50, 60, 95, 0.3); 
 
    transition-property: background; 
 
    transition-duration: 1s; 
 
    transition-delay: 2s; 
 
} 
 
div:hover { 
 
    background: rgba(50, 60, 95, 1); 
 
    transition-delay: 0s; 
 
}

<div></div>

Answer 2

Ihr Code funktioniert einfach.

Dieser "schreckliche" Effekt, wie Sie sagten, ist nur, weil Sie das Element schweben, bevor die Animation fadeOut beendet.

Versuchen Sie, nur die Animation Verzögerung des div so zu reduzieren:

für können Sie sehen, es

div { 
    width: 100px; 
    height: 100px; 
    background: rgba(50, 60, 95, 1); 
    animation-name: fadeItOut; 
    animation-duration: 1s; 
    animation-delay: 1s; 
    animation-fill-mode: forwards; 
} 

Dies ist die Geige ich gemacht habe: https://jsfiddle.net/oqyep7tt/

zumindest die Art und Weise Harry ist Weg mehr besser als das.

Answer 3

diese

div { 
    width: 100px; 
    height: 100px; 
    background: rgba(50, 60, 95, 1); 
    transition: background 300ms; 
    animation-name: fadeItOut; 
    animation-duration: 1s; 
    animation-delay: 0s; 
    animation-fill-mode: forwards; 
} 

div:hover { 
    animation-name: fadeItIn; 
    animation-duration: 1s; 
    animation-delay: 0s; 
    animation-fill-mode: forwards; 
} 

@keyframes fadeItIn { 
    0% { 
    background: rgba(50, 60, 95, 1); 
    } 
    100% { 
    background: rgba(50, 60, 95, 0.3); 
    } 
} 

@keyframes fadeItOut { 
    0% { 
    background: rgba(50, 60, 95, 0.3); 
    } 
    100% { 
    background: rgba(50, 60, 95, 1); 
    } 
} 

Live-Demo - https://jsfiddle.net/rye2gnp3/