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;
height: 300px;
background-color: red;
}
div:hover {
background-color: green;
}
|
|
transition: background-color
|
div {
width: 300px;
height: 300px;
background-color: red;
transition: background-color;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover {
background-color: green;
}
|
|
transition: background-color
|
div {
width: 300px;
height: 300px;
background-color: red;
transition: background-color;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover {
background-color: green;
transition: background-color;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 0s;
}
|
|
transition: 2 Eigenschaften
|
div {
width: 300px;
height: 300px;
background-color: red;
transition: height, width;
transition-duration: 1s, 2s;
transition-timing-function: linear;
transition-delay: 0, 0.3s;
}
div:hover {
width: 150px;
height: 150px;
}
transition = transition: width 2s, height 2s;
|
|
transition: 2 Eigenschaften mit delay
|
div {
width: 300px;
height: 300px;
background-color: red;
transition: height, width;
transition-duration: 1s, 1s;
transition-timing-function: linear;
transition-delay: 0s 2s;
}
div:hover {
width: 150px;
height: 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
Hoverprobleme? > Lösung
div6
cubic-bezier
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