CSS Elemente automatisch nach 5 Sekunden ausblenden

Ist es möglich, ausblenden element 5 Sekunden nach dem laden der Seite?
Ich weiß, es ist eine jQuery-Lösung.

Möchte ich genau das tun die gleiche Sache, aber in der Hoffnung, um das gleiche Ergebnis mit CSS-übergang.

Jede innovative Idee? Oder bin ich zu Fragen über die Grenze der css-übergang/animation?

InformationsquelleAutor der Frage Alfred | 2014-02-24

  1. 55

    JA!

    Aber man kann es nicht in der Weise können Sie sofort denken, weil Sie nicht animieren, oder erstellen Sie einen übergang, um die Eigenschaften, die Sie würde sonst verlassen auf (z.B. display oder änderung der Maße und Einstellung zu overflow:hidden), um richtig zu verstecken, das element und verhindern, dass es durch die Einnahme von oben sichtbaren Raum.

    Somit, erstellen Sie eine animation, die für die Elemente in Frage, und einfach Umschalten visibility:hidden; nach 5 Sekunden, auch während der Einstellung der Höhe und Breite auf null, um zu verhindern, dass das element aus dem noch zu besetzen Raum in der DOM-flow.

    GEIGE

    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 id='hideMe'>Wait for it...</div>

    InformationsquelleAutor der Antwort SW4

  2. 5

    Natürlich können Sie, nur nutzen setTimeout zu ändern, eine Klasse oder etwas, um die den übergang auslösen.

    HTML:

    <p id="aap">OHAI!</p>

    CSS:

    p {
    opacity:1;
    transition:opacity 500ms;
}
p.waa {
    opacity:0;
}

    JS laufen auf Last-oder DOMContentReady:

    setTimeout(function(){
    document.getElementById('aap').className = 'waa';
}, 5000);

    Beispiel Geige hier.

    InformationsquelleAutor der Antwort Niels Keurentjes

Schreibe einen Kommentar