CSS3-Übergang: Ausblendeffekt

Beim Versuch, einen Ausblendeffekt mit reinem CSS zu implementieren, kann es verwirrend sein, warum eine Folienanimation verwendet wird 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 mit CSS3-Übergängen:

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}

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 wie Effekte](https://css-tricks.com/css3-transition-fadein-fadeout/)

Die Unterschiede verstehen:

Der Hauptunterschied Der Unterschied zwischen einem Ausblenden 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.