Können Sie mit reinen CSS-Übergängen ein Element nach einer Verzögerung ausblenden?

Elemente mit CSS nach einer Verzögerung ausblenden

Diese Frage macht jQuery-Lösungen überflüssig und untersucht, ob es möglich ist, ein Element 5 Sekunden lang auszublenden nach dem Laden einer Seite mit reinen CSS-Übergängen.

Der Innovative Ansatz

Da es bei CSS-Animationen und -Übergängen typischerweise um die Änderung von Eigenschaften wie Abmessungen oder Sichtbarkeit geht, sind die Standardmethoden zum Ausblenden eines Elements (z. B. die Anzeige auf „Ausgeblendet“ setzen) hier nicht anwendbar.

Daher löst eine benutzerdefinierte Animationssequenz diese Herausforderung. Indem Höhe und Breite nach 5 Sekunden auf Null animiert werden, verschwindet das Element praktisch aus der Ansicht, nimmt aber immer noch keinen Platz im Layout ein. Gleichzeitig stellt die Einstellung der Sichtbarkeit auf „Ausgeblendet“ sicher, dass sie für den Benutzer nicht wahrnehmbar bleibt.

Implementierung und Beispiel

Der folgende Code zeigt, wie dies implementiert wird Lösung:

CSS:

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        visibility: hidden; /* In WebKit/Blink browsers */
        overflow: hidden;
    }
}

HTML:

<div>

Geige:

Sehen Sie sich die Lösung in Aktion auf JSFiddle an: [Link zu Fiddle]

Das obige ist der detaillierte Inhalt vonKönnen Sie mit reinen CSS-Übergängen ein Element nach einer Verzögerung ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!