Boolie.org

Ein Beispiel um mit Transitions Animationen versetzt starten zu lassen.
Bei diesem Beispiel wird ein blaues Rechteck über das hover-Event zuerst transparent, danach ändert es die Höhe.

div {
    width: 100px;
    height: 100px;
    background: #009ee0;
    opacity: 1;
    transition: 1s 1s height ease, 1s 0s opacity ease;
    display: block;
}
div:hover {
    opacity: 0;
    height: 150px;
}

Erläuterung

div {
    transition:   1s       1s      height  ease, 1s 0s opacity ease;
    //          dauer verzögerung   Was    type, -||-
}

Anfangseffekt auch als Endeffekt

Da das hover-Event die Ausgangswerte von „transition“ überschreibt, muss der Startwert auf das hover-Event gesetzt werden und der invertierte Wert auf den Normalzustand.

div {
    width: 100px;
    height: 100px;
    background: #009ee0;
    opacity: 1;
    transition: 1s 0s height ease, 1s 1s opacity ease;
    display: block;
}
div:hover {
    opacity: 0;
    height: 150px;
    transition: 1s 1s height ease, 1s 0s opacity ease;
}

View Comments

Aktuell keine Kommentare vorhanden.