Eine Transition besteht in der Regel aus zwei Zuständen (Schlüsselbilder), zwischen denen eine Animation abläuft. Die Transition entsteht durch veränderte Attributwerte, die zu definieren sind. Der Start muss über ein Ereignis ausgelöst werden, in den folgenden Beispielen wird das ein MouseOver mit der Pseudo-Klasse Hover sein.
| Eigenschaft | Bedeutung | Wertzuweisung |
| transition | Zusammenfassung | property duration timing-function delay, initial, inherit |
| transition-property | Eigenschaft für Animation | none, all, property, initial, inherit |
| transition-timing-function | Geschwindigkeit für Effekt | ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(), initial, inherit |
| transition-duration | Dauer des Effekts | time, initial, inherit |
| transition-delay | Verzögerung des Effekts | time, initial, inherit; |
Mit transition-property legen sie fest, welche Eigenschaften dynamisch verändert werden sollen, transition-property ist nicht vererbbar.
div {
width: 100px;
height: 100px;
background: yellow;
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
Mit transition-duration legen sie die Dauer des Effekts in Sekunden(s) oder Millisekunden(ms) fest. Standardwert ist 0s (kein Effekt), transition-duration ist nicht vererbbar.
div {
width: 100px;
height: 100px;
background: red;
transition-property: width, height;
transition-duration: 5s;
}
div:hover {
width: 300px;
height: 300px;
}
Mit transition-timing-function legen sie die Geschwindigkeitskurve (Geschwindigkeit vom Start bis zum Ende) fest, transition-timing-function ist nicht vererbbar.
div {
width: 100px;
height: 100px;
background: red;
transition-property: width, height;
transition-duration: 5s;
transition-timing-function: linear;
}
div:hover {
width: 300px;
height: 300px;
}
Mit transition-delay legen sie die Verzögerung vor dem Start in Sekunden(s) oder Millisekunden(ms) fest, transition-delay ist nicht vererbbar.
div {
width: 100px;
height: 100px;
background: red;
transition-property: width, height;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 2s;
}
div:hover {
width: 300px;
height: 300px;
}
Die transition-Eigenschaft ist eine Zusammenfassung von transition-property, transition-duration, transition-timing-function und transition-delay. Wenn Sie zwei Zahlenwerte angeben, ist der erste die Dauer (transition-duration), der zweite die Verzögerung (transition-delay) der Animation. transition ist nicht vererbbar.
div {
width: 100px;
height: 100px;
background: red;
transition: width, height 5s linear 2s;
}
div:hover {
width: 300px;
height: 300px;
}
Eine Transition ist ein animierter Übergang zwischen genau zwei Keyframes (Schlüsselbildern), der von einem Ereignis ausgelöst wird. Eine Animation kann beliebig viele Keyframes haben und braucht kein Ereignis zum auslösen. Die Animation läuft von einem Keyframe zum nächsten. Mit CSS kann man einstellen, dass eine Animation am Ende looped, rückwärts läuft oder zu Ende ist.
| Eigenschaft | Bedeutung | Wertzuweisung |
| @keyframes | Animationssequenz | animationname {keyframes-selector {css-styles;}} |
| animation | Zusammenfassung | name duration timing-function delay iteration-count direction fill-mode play-state, initial, inherit |
| animation-name | Animation-name für @keyframes Regel | keyframename, none, initial, inherit |
| animation-duration | Dauer der Animation | time, initial, inherit |
| animation-timing-function | Beschleunigungskurven der Animation | linear, ease, ease-in, ease-out, cubic-bezier(n,n,n,n), steps(), step-start, step-end, initial, inherit |
| animation-delay | Verzögerung vor dem Start | time, initial, inherit; |
| animation-iteration-count | Anzahl der Wiederholungen | number, infinite, initial, inherit; |
| animation-direction | Verlauf die Animation | normal, reverse, alternate, alternate-reverse, initial, inherit; |
| animation-fill-mode | Status nach Beendigung der Animation | none, forwards, backwards, both, initial, inherit; |
| animation-play-state | Animation kann laufen oder pausieren | paused, running, initial, inherit; |
Eine Animation hat beliebig viele Keyframes (Schlüsselbilder). Die Animation läuft von einem Keyframe zum nächsten, mit Keyframes werden also Sclüsselbilder definiert. Mit der @keyframes-Regel werden wichtige Bestandteile erstellt:
Dia Syntax der @keyframes-Regel sieht wie folgt aus:
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/*Alternativ*/
@keyframes example {
0% {background-color: red;}
100% {background-color: yellow;}
}
Diese Animation besteht aus zwei Schlüsselbilder, achten sie auf das korrekte Setzen der geschwungenen Klammern. Auf diese Weise kann man weitere Schlüsselbilder einfügen.
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
Mit der animation-name-Eigenschaft wird der name der @keyframes-Regel im gewünschtem Element aufgerufen, animation-name ist nicht vererbbar.
div {
animation-name: example;
}
Mit der animation-duration-Eigenschaft wird die Dauer der Animation in Sekunden (s) oder Millisekunden (ms) festgelegt, animation-duration ist nicht vererbbar.
div {
animation-name: example;
animation-duration: 2s;
}
Mit animation-timing-function legen sie die Geschwindigkeitskurve (Geschwindigkeit vom Start bis zum Ende) fest, animation-timing-function ist nicht vererbbar.
div {
animation-name: example;
animation-duration: 2s;
animation-timing-function: linear;
}
Mit animation-delay legen sie die Verzögerung vor dem Start in Sekunden(s) oder Millisekunden(ms) fest, animation-delay ist nicht vererbbar.
div {
animation-name: example;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
}
Mit animation-iteration-count legen sie fest, wie oft die Animation laufen soll, animation-iteration-count ist nicht vererbbar.
div {
animation-name: example;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
}
Mit animation-direction legen sie fest, in welcher Richtung die Animation laufen soll, animation-direction ist nicht vererbbar.
div {
animation-name: example;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Mit animation-fill-mode legen sie den Zustand des Elements am Ende der Animation fest, animation-fill-mode ist nicht vererbbar.
div {
animation-name: example;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
Mit animation-play-state legen sie fest, ob die Animation läuft oder pausiert, animation-play-state ist nicht vererbbar. Diese Eigenschaft ist nützlich, wenn Sie die Animation durch JavaScript steuern wollen.
div {
animation-name: example;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: paused;
}
Die animation-Eigenschaft ist eine Zusammenfassung von allen acht Eigenschaften. Wenn Sie zwei Zahlenwerte angeben, ist der erste die Dauer (animation-duration), der zweite die Verzögerung (animation-delay) der Animation. animation ist nicht vererbbar.
div {
animation: example 2s linear 2s infinite alternate forwards;
}
CSS-transform verändert die Lage und Form von HTML-Elementen. Folgende Transformierungen stehen zur Verfügung:
Die Transformation hat keine Auswirkung auf den Flow der restlichen HTML-Elemente. Ein mit CSS-Transforms verändertes Element verschiebt keine Elemente im HTML-Flow, sondern überlagert diese ähnlich der absoluten Positionierung. Es gibt zwei unterschiedliche transform-Eigenschaften, nämlich 2D- und 3D-Transforms.
2D Transformationen ermöglichen, dass Elemente in einem zweidimensionalen Raum transformiert werden (x- und y-Achse). 2D Transformationen stellen zwei Eigenschaften zur Verfügung, transform und transform-origin.
| Eigenschaft | Bedeutung | Wertzuweisung |
| transform | Elemente bewegen, skalieren, rotieren, verzerren | matrix, translate, scale, rotate, skew |
| transform-origin (two-value syntax) | Kann den Mittelpunkt oder Drehpunkt eines Elements setzen | x-Achse (left, center, right, Längenangabe, Prozentangabe) y-Achse (top, center, bottom, Längenangabe, Prozentangabe), initial, inherit |
Die transform-Eigenschaft gibt es als 2D und 3D Version. Die Methoden von transform sind umfangreich, sehr komplex ist die matrix-Methode mit 6 Zahlenwerten, damit kann man bewegen, skalieren, rotieren, verzerren mit nur einer Methode gleichzeitig.
div {
transform: matrix(0.586,0.8,-0.8,0.586,10,0);
}
Mit der Eigenschaft transform-origin können Sie einen Mittelpunkt (Drehpunkt) für transform:rotate() festlegen, um den ein Element gedreht wird. Der Standardwert ist 50% 50%. Setzt man die beiden Werte auf 0% so ist der Drehpunkt oben links. Den Drehpunkt definieren sie mit zwei Angaben, einen für die x-Achse und einen für die y-Achse.
div {
transform: rotate(45deg);
transform-origin: 20% 40%;
}
3D-Transformationen erweitern 2D-Transformationen um eine dritte Dimension. Neben der x- und der y-Achse gibt es die z-Achse, welche die Tiefe des Elements bestimmt.
| Eigenschaft | Bedeutung | Wertzuweisung |
| transform | Elemente bewegen, skalieren, rotieren, verzerren | matrix, translate, scale, rotate, skew |
| transform-origin (three-value syntax) | Kann den Mittelpunkt oder Drehpunkt eines Elements setzen | x-Achse (left, center, right, Längenangabe, Prozentangabe) y-Achse (top, center, bottom, Längenangabe, Prozentangabe), z-Achse (Längenangabe), initial, inherit |
| transform-style | 3D Ansicht der Kindelemente | flat, preserve-3d, initial, inherit |
| perspective | Perspektivische Ansicht des Kindelements | none, Längenangabe |
| perspective-origin | Position des Kindelements an der x- und der y-Achse | x-Achse (left, center, right, Längenangabe, Prozentangabe) y-Achse (top, center, bottom, Längenangabe, Prozentangabe), initial, inherit |
| backface-visibility | Sichtbarkeit der Rückseite eines 3D-Elements | visible, hidden, initial, inherit |
Die transform-Eigenschaft in der 3D Version erweitert die Methoden um eine dritte Dimension. Die matrix-Methode tritt hier mit 16 Zahlenwerten auf, alle weiteren Methoden bekommen eine Achse dazu.
.z img {
transform: rotateZ(50deg);
}