CSS mehrere Transition versetzt starten

Datum
04.09.2017

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

Marc Borkowski
Autor: Marc Borkowski

Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Rostock. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bilde mich aktuell im grafischen Bereich weiter. Meine Zukunft sehe ich beim gestalterischen Web.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Instagram logoYouTube Logo

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare anschauen
Kommentare (0)