Zur Startseite wechseln
CSS




Der Inhalt ist erst nach dem Einloggen sichtbar



Aktuell geöffnete Datei: 'transition'






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: 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


div3


Hoverprobleme? > Lösung

div4




 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