Der Inhalt ist erst nach dem Einloggen sichtbar
Themen:
Aktuell geöffnete Datei: 'transition'
Zum Wechseln des Themas einfach ein neues Thema eingeben
transition
transition-duration = Wie lange soll die transition dauern? (Bei Aufzählungen gerennt mit "," gleiche Reihenfolge wie transition
transition-delay = Wie viel Zeit soll vergehen, bis die transition beginnt? (Bei Aufzählungen gerennt mit "," gleiche Reihenfolge wie transition
transition-property = Welche Eigenschaften (Aufzählung getrennt mit ","?
transition-timing-function =
ease - langsamer Start, schneller, langsames Ende
linear - gleiche Geschwindigkeit von Anfang bis Ende
ease-in - langsamer Start und schneller werdend
ease-out - schneller Sart und zum Ende hin langsamer werdend
ease-in-out - langsamer Anfang und Ende
cubic-bezier(n,n,n,n) - Mit dieser Funktion können Animationen in einer Kubischen-Funktion definieren werden
steps(4) / (4, end) / (4, start)
nur :hover |
div {width: 300px;} div:hover { background-color: green;} |
transition: background-color |
div {width: 300px;} div:hover { background-color: green;} |
transition: background-color |
div {width: 300px;} div:hover { background-color: green;} |
transition: 2 Eigenschaften |
div {width: 300px;} div:hover { width: 150px;} transition = transition: width 2s, height 2s; |
transition: 2 Eigenschaften mit delay |
div {width: 300px;} div:hover { width: 150px;} |
Erstellen Sie ein div-Element, bei dessen hover zuerst die Breite reduziert wird, anschließend die Höhe.
Wenn Sie das div-Element mit dem Cursor verlassen, soll zuerst die Höhe zurückgesetzt werden und anschließend die Breite.
Erstellen Sie ein div-Element, bei dessen hover direkt eine Drehung einsetzt. Leicht verzögert beginnen sich Hintergrundfarbe, Höhe, Breite und der Radius des Rahmens (von 0 auf 50%) zu verändern. Alle Übergänge sollen nach 6 Sekunden gleichzeitig abgeschlossen sein.
Möchten Sie alle Eigenschaften zwischen der Grunddarstellung des Elements und Element:hover gleichzeitig wechseln:
Kurzform: transition: all 400ms 1s ease-in;
Kurzform: transition: all 400ms ease-in 1s;
div1
div2
div3
Hoverprobleme? > Lösung
div4
div6
cubic-bezier
0.9,0.05,0.43,1.7
0.9,0.05,0.43,1.7
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0);
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0);
ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0);
ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0);
ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0);
Graph erstellen