CSS-Animationen

Dabei besteht eine solche Animation immer aus zwei Komponenten: der Definition der Animation mittels Keyframes sowie Style-Regeln, welche die eigentliche CSS-Animation beschreiben. Mithilfe der Keyframes legen Sie den Start- und den Endzustand fest sowie die Wegpunkte dazwischen. Sie haben in der Beschreibung sicherlich eine Ähnlichkeit zu den Transitions festgestellt, wobei CSS-Keyframes die Animationen automatisch starten während eine Transition einen Trigger, wie einen Mausklick benötigt. In diesem Workshop zeigen wir Ihnen, wie eine CSS-Animation aufgebaut ist und welche Optionen Ihnen bei der Umsetzung zur Verfügung stehen. Generell werden die CSS-Animationen über alle Browser hinweg unterstützt. Sogar der Internet Explorer bietet ab Version 10 die volle Unterstützung an (Bild 1).