CSS transformieren und animieren

Hinweis: Wie Sie unten sehen werden, ist dieses Modul derzeit nur ein Lehrplanentwurf, mit einigen Links zu Starter-Leitfäden. Wir beabsichtigen, dies in der Zukunft in einen vollständigen Kurs umzuwandeln, sobald die Zeit es erlaubt.

Animationen sind ein wesentlicher Bestandteil einer guten Benutzererfahrung. Eine subtile Nutzung kann Seitendesigns interessanter und ansprechender machen und auch die Benutzerfreundlichkeit und die wahrgenommene Leistung verbessern.

Voraussetzungen

Bevor Sie mit diesem Modul beginnen, sollten Sie mit HTML und CSS vertraut sein.

Lernziele

Verstehen, warum CSS-Transformationen und -Animationen benötigt werden.
Eine Warnung — übermäßige Nutzung kann sich negativ auf Benutzerfreundlichkeit und Zugänglichkeit auswirken.
Häufige Transformationen — Skalierung, Rotation und Translation.
3D-Transformationen und wie 3D-Positionierung/Perspektive im Web behandelt wird.
Transitionen.
Animationen.

Leitfäden

Verwendung von CSS-Transformationen: Durch das Modifizieren des Koordinatenraums ändern CSS-Transformationen die Form und Position des betroffenen Inhalts, ohne den normalen Dokumentenfluss zu stören. Dieser Leitfaden bietet eine Einführung in die Verwendung von Transformationen.
Verwendung von CSS-Transitionen: CSS-Transitionen bieten eine Möglichkeit, die Animationsgeschwindigkeit beim Ändern von CSS-Eigenschaften zu steuern. Anstatt dass Änderungen an einer Eigenschaft sofort wirksam werden, können Sie die Änderungen über einen Zeitraum hinweg erfolgen lassen. Zum Beispiel, wenn Sie die Farbe eines Elements von weiß auf schwarz ändern, erfolgt die Änderung normalerweise sofort. Mit aktivierten CSS-Transitionen erfolgen die Änderungen in Zeitintervallen, die einer Beschleunigungskurve folgen, die alle angepasst werden können.
Verwendung von CSS-Animationen: CSS-Animationen ermöglichen es, Übergänge von einer CSS-Stilkonfiguration zu einer anderen zu animieren. Animationen bestehen aus zwei Komponenten: einem Stil, der die CSS-Animation beschreibt, und einem Satz von Keyframes, die die Start- und Endzustände des Animationsstils sowie mögliche Zwischenstationen angeben.