Kann man ein Element nach 5 Sekunden nur mit CSS ausblenden?

CSS-Elemente automatisch nach 5 Sekunden ausblenden

Können Sie ein Element 5 Sekunden nach dem Laden einer Seite mit CSS ausblenden? Eine jQuery-Lösung ist sicherlich machbar, aber ist es möglich, dies mithilfe eines CSS-Übergangs zu erreichen?

Die Antwort: Ja

Es gibt jedoch eine Wendung. CSS-Übergänge können nicht auf Eigenschaften wie „Anzeige“ oder Abmessungen angewendet werden, um eine echte Ausblendung zu erreichen. Erstellen Sie stattdessen eine Animation für das Element und schalten Sie seine Sichtbarkeit nach 5 Sekunden auf „Ausgeblendet“ um. Setzen Sie gleichzeitig die Höhe und Breite auf Null, um eine Platzbelegung im DOM-Fluss zu verhindern.

Beispiel

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>

Dieser Ansatz erzielt das gewünschte Ergebnis mithilfe von CSS-Übergängen, indem das Element nach einer bestimmten Verzögerung ausgeblendet wird, ohne den Seitenfluss zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonKann man ein Element nach 5 Sekunden nur mit CSS ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!