Können CSS-Übergänge oder Animationen Elemente nach 5 Sekunden automatisch ausblenden?

CSS-Elemente nach 5 Sekunden automatisch ausblenden

Es stellt sich die Frage: Ist es möglich, ein Element fünf Sekunden nach dem Laden der Seite auszublenden? ? Eine jQuery-Lösung ist bekannt, aber die Absicht besteht darin, sie mithilfe eines CSS-Übergangs zu replizieren. Ist das möglich oder liegt es außerhalb der Möglichkeiten von CSS-Übergängen/-Animationen?

Die Antwort

Die Antwort ist ein klares Ja! Dies kann jedoch nicht in der erwarteten Weise erreicht werden, da eine Animation oder ein Übergang der Eigenschaften, die normalerweise zum Verbergen eines Elements verwendet werden (z. B. Anzeige oder Änderung von Abmessungen und Einstellung auf Überlauf: Versteckt), nicht möglich ist.

Stattdessen eine Animation wird für die relevanten Elemente erstellt. Nach fünf Sekunden Sichtbarkeit: ausgeblendet; ist umgeschaltet, während Höhe und Breite auf Null gesetzt sind, um zu verhindern, dass das Element Platz im DOM-Fluss einnimmt.

Beispiel Code

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}

@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div></div>

Das obige ist der detaillierte Inhalt vonKönnen CSS-Übergänge oder Animationen Elemente nach 5 Sekunden automatisch ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!