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 bin ausgebildeter Mediengestalter. Aktuell bilde ich mich Bereich Marketing weiter, Fokus: Video & Social Media.

Kontakt

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

Instagram logoYouTube Logo
Um ein Kommentar zu verfassen, bitte einloggen.
Kommentare (0)