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 Portait
Autor: Marc Borkowski

Moin,
mein Name ist Marc Borkowski. Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Wismar. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bin ausgebildeter Mediengestalter. Aktuell entwickle ich mich zu einem Techlead und werde hier meine Erfahrungen mit euch teilen.

Kontakt

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

Instagram logoLinkedIn LogoYouTube Logo

Schreibe einen Kommentar

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

Kommentare (0)
klimabewusste Website