CSS mehrere Transition versetzt starten

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.5;
    height: 150px;
}

Code-Erklärung um dies zu verstehen

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.5;
    height: 150px;
    transition: 1s 1s height ease, 1s 0s opacity ease;
}

CSS Tutorial

Voriger Schritt: CSS Flexbox Tutorial

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS: Checkbox styling