Warum funktioniert meine Folienanimation nicht, wenn ich versuche, in CSS einen Ausblendeffekt zu erstellen?

CSS3-Übergang: Fade-Out-Effekt

Beim Versuch, einen Fade-Out-Effekt mit reinem CSS zu implementieren, kann es verwirrend sein, warum es sich um eine Folienanimation handelt würde nicht funktionieren. Hier ist der Grund:

Der Schlüssel zu einem Ausblendeffekt liegt in der Änderung der Deckkrafteigenschaft. Die obere Eigenschaft, die für Folienanimationen verwendet wird, erzeugt nicht den gewünschten Effekt.

Ausblendeffekt mit CSS3-Übergang

Hier ist ein Beispiel, wie man einen erreicht Ausblendeffekt mithilfe von CSS3-Übergängen:

<code class="css">.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}</code>

Wenn diese Klasse auf ein Element angewendet wird, wird sie über einen Zeitraum von 2 Sekunden allmählich ausgeblendet.

Zusätzliche Ressourcen:

• [CSS3-Übergang: FadeIn- und FadeOut-ähnliche Effekte](https://css-tricks.com/css3-transition-fadein-fadeout/)

Die Unterschiede verstehen:

Der Hauptunterschied zwischen einer Ausblend- und einer Folienanimation liegt in der Eigenschaft, die übertragen wird. Für einen Ausblendeffekt ist es die Opazitätseigenschaft, während es sich bei einer Folienanimation normalerweise um eine Positionseigenschaft wie „oben“ oder „links“ handelt.

Im Fall des bereitgestellten Codes ist die Animation so eingestellt, dass sie die Top-Eigenschaft transformiert , wodurch das Element vom Bildschirm verschoben wird, anstatt es auszublenden.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine Folienanimation nicht, wenn ich versuche, in CSS einen Ausblendeffekt zu erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!