CSS Transition: Warum es bei “visibility” nicht funktioniert – und was hilft!

Mit dem CSS Attribut “transition” lassen sich weiche Übergänge und auch CSS Animationen erzeugen: Durch die CSS Transition werden Zwischenwerte zwischen zwei Zuständen berechnet und angezeigt. Mit dem Attribut “visibility” geht das aber nicht: Visibility kann nur “visible” oder “hidden” sein: Es gibt keine Zwischenwerte.

Um trotzdem ein sanftes Ein- und Ausblenden den Elementen per CSS Transition zu ermöglichen, muss man statt dem Attribut “visibility” den Wert von “opacity” nutzen: Damit lässt sich die Sichtbarkeit (oder Transparenz) einstellen. Statt den Wert von “visibility” von “visible” auf “hidden” zu setzen, ändert man die “opacity” von “0” auf “1”: Damit kann man mit dem CSS Attribut “transition” ein sanftes Ein- und Ausblenden realisieren:

<div style="opacity:1;transition:all 3s;"></div>

Ändert man jetzt die Eigenschaft von “opacity”, zum Beispiel per Javascript, sorgt die Transition jetzt für das Ausblenden über den eingestellten Zeitraum: In diesem Beispiel hier drei Sekunden.