Animierte Objekte ohne JavaScript 08.07.2021, 09:32 Uhr

CSS-Animationen

CSS-Animationen überführen Objekte von einem CSS-Zustand in einen anderen.
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).
Breite Unterstützung: Die Methode für die Umsetzung von CSS-Animationen werden von allen aktuellen Browsern unterstützt (Bild 1)
Quelle: Hitzig

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar