Wie erreicht man einen Fade-Out-Effekt in CSS3: Keyframe-Animationen vs. Übergänge?

CSS3-Übergang – Ausblendeffekt

In CSS3 kann ein Ausblendeffekt durch die Verwendung von Keyframe-Animationen erreicht werden. Es ist jedoch wichtig, sicherzustellen, dass die Animationseinstellungen richtig konfiguriert sind, um den gewünschten Effekt zu erzielen.

Im bereitgestellten Code funktioniert die Slideup-Animation nicht, da die obere Eigenschaft animiert wird, wodurch das Element vertikal verschoben würde von der Seite. Um einen Ausblendeffekt zu erzielen, sollte stattdessen die Opazitätseigenschaft animiert werden. Hier ist eine aktualisierte Version des Codes:

<code class="css">@keyframes slideup {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}</code>

Alternativ ist ein prägnanterer Ansatz mit CSS3-Übergängen verfügbar:

<code class="css">.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}</code>

Um ein Element mit diesem Ansatz auszublenden, fügen Sie einfach hinzu die versteckte Klasse zum Element:

<code class="css"><div class="success-wrap successfully-saved visible">Saved</div></code>

Dadurch wird das Element über 2 Sekunden auf Deckkraft: 0 umgestellt, wodurch ein Ausblendeffekt entsteht. Beachten Sie, dass Sichtbarkeit: Ausgeblendet mit einer Verzögerung hinzugefügt wird, sodass die Ausblendanimation abgeschlossen werden kann, bevor das Element ausgeblendet wird.

Das obige ist der detaillierte Inhalt vonWie erreicht man einen Fade-Out-Effekt in CSS3: Keyframe-Animationen vs. Übergänge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!