Wie kann ich CSS-Übergänge verwenden, um Elemente nach einer Verzögerung automatisch auszublenden?

CSS-Übergänge: Elemente nach einer Verzögerung automatisch ausblenden

Das Ausblenden von Elementen auf einer Webseite nach einem bestimmten Zeitintervall kann durch verschiedene Methoden erreicht werden. Während jQuery eine unkomplizierte Lösung bietet, stellen CSS-Übergänge eine innovative Alternative zum Erreichen des gleichen Ergebnisses dar.

Ansatz:

Trotz der Einschränkungen von CSS-Übergängen bei der direkten Animation von Eigenschaften wie Anzeige ist es möglich, das Ausblenden von Elementen zu simulieren, indem die Animation genutzt und die Sichtbarkeit von Elementen manipuliert wird.

Implementierung:

1. Erstellen Sie eine CSS-Animation für die gewünschte Dauer (5 Sekunden in diesem Fall) mit @keyframes.
2. Setzen Sie innerhalb der Animation die Höhe und Breite des Elements auf Null, damit es verschwindet.
3. Verwenden Sie den Animationsfüllmodus: vorwärts; um sicherzustellen, dass das Element nach dem Ende der Animation ausgeblendet bleibt.
4. Nach der Animationsverzögerung (5 Sekunden) schalten Sie „visibility:hidden“ um. auf das Element, um es vollständig aus der Ansicht zu entfernen.

Geige:

Die folgende Geige demonstriert die CSS-Implementierung:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    animation: cssAnimation 0s ease-in 5s forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}

<div>

Diese Technik verbirgt effektiv Elemente nach dem angegebenen Zeitintervall und verhindert so, dass sie sichtbaren Platz auf der Seite einnehmen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Übergänge verwenden, um Elemente nach einer Verzögerung automatisch auszublenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!