CSS-Animation funktioniert nicht richtig

Question

Ich habe eine sehr einfache Animation, die eine div ausblendet und schrumpft.

Aber das Problem ist, dass wenn die Animation beendet ist, geht es zurück zum Anfang und bleibt dort.

div { 
 
    background-color: red; 
 
    height: 80px; 
 
} 
 

 
.fade-out { 
 
    animation-name: fade-out; 
 
    animation-duration: 2s; 
 
} 
 

 
@keyframes fade-out { 
 
    0% { opacity: 1; } 
 
    50% { opacity: 0; } 
 
    100% { opacity: 0; height: 0;} 
 
}

 
    <div class="fade-out">Style Test</div>

Answer 1

Wenn Sie animation-fill-mode: forwards; auf Ihre .fade-out Regel fügen Sie Ihre Animation beheben.

animation-fill-mode gibt an, wie CSS-Regeln vor und nach der Ausführung der Animation angewendet werden sollen. Der Standardwert ist none, was bedeutet, dass vor und nach der Ausführung der Animation keiner der Animationsstile angewendet wird. Deshalb sehen Sie, dass es in den Zustand vor der Animation zurückkehrt.

forwards weist den Browser an, die Stile aus dem letzten Schlüsselbild beizubehalten. Das ist, was du suchst.

Weitere Informationen finden Sie unter the MDN docs.

div { 
 
    background-color: red; 
 
    height: 80px; 
 
} 
 

 
.fade-out { 
 
    animation-name: fade-out; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes fade-out { 
 
    0% { opacity: 1; } 
 
    50% { opacity: 0; } 
 
    100% { opacity: 0; height: 0;} 
 
}

<div class="fade-out">Style Test</div>

Answer 2

Verwenden animation-fill-mode Eigenschaft

.fade-out { 
    animation-name: fade-out; 
    animation-duration: 2s; 
    animation-fill-mode: forwards 
}