Transformation und Animation von CSS

Hinweis: Wie Sie unten sehen werden, ist dieses Modul derzeit nur ein Lehrplan umriss/Gliederung, mit einigen Links zu grundlegenden Leitfäden. Wir beabsichtigen, dies in Zukunft, wenn die Zeit es erlaubt, in einen vollständigen Kurs umzuwandeln.

Animationen sind ein wesentlicher Bestandteil einer guten Benutzererfahrung. Subtiler Einsatz kann das Design von Seiten interessanter und ansprechender gestalten und auch die Benutzerfreundlichkeit und 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.
  • Ein Vorbehalt — übermäßige Nutzung kann sich negativ auf die Benutzbarkeit und Zugänglichkeit auswirken.
  • Häufige Transformationen — Skalierung, Rotation und Translation.
  • 3D-Transformationen und wie 3D-Positionierung/Perspektive im Web gehandhabt wird.
  • Transitionen.
  • Animationen.

Leitfäden

Using CSS transforms

Durch die Modifikation 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 Nutzung von Transformationen.

Using CSS transitions

CSS-Transitionen ermöglichen es, die Animationsgeschwindigkeit beim Ändern von CSS-Eigenschaften zu kontrollieren. Anstatt dass Eigenschaftsänderungen sofort wirksam werden, können Sie bewirken, dass die Änderungen einer Eigenschaft über einen Zeitraum hinweg stattfinden. Beispielsweise erfolgt die Änderung der Farbe eines Elements von Weiß zu Schwarz normalerweise sofort. Mit aktivierten CSS-Transitionen erfolgen Änderungen in Zeitintervallen, die einer Beschleunigungskurve folgen, die alle anpassbar sind.

Using CSS animations

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 einer Reihe von Keyframes, die die Anfangs- und Endzustände des Animationsstils sowie mögliche Zwischenpunkte angeben.