Präsentation

Willkommen

CSS & CSS-Animationen

GFS von Ronja Wagner
TG11/2

Übersicht

Inhaltsverzeichnis

  • HTML
  • CSS
  • Zusammenspiel mit JavaScript
  • Animationen
  • Transitions
  • Keyframe-Animationen
  • Scroll-driven Animationen
  • Animationen in der Praxis
  • Fazit
  • Quellen
Grundlage

HTML

Hypertext Markup Language

Wofür

  • Auszeichnungssprache für Webinhalte
  • Struktur: Überschriften, Absätze, Listen, Medien
  • Keine Programmiersprache
  • Dateiendung .html

Browser

  • Chrome, Firefox, Edge, Safari
  • Lesen & rendern den Inhalt

Editoren

  • VS Code
  • Notepad++
  • Sublime Text

Aufbau eines Tags

<h1>Überschrift</h1>
<Start-Tag> … </End-Tag>

Tags definieren Struktur — verschachtelbar für Tabellen, Links, Medien.

Gestaltung

CSS

Cascading Style Sheet

Nutzen

  • Farben, Abstände, Layout, Typografie
  • Trennung von Inhalt & Design
  • Auslagerung in .css-Dateien

Vorteile & Anwendung

  • Wiederverwendbar
  • Übersichtlich
  • Konsistentes Erscheinungsbild

Aufbau von Selektoren

hr {
  text-align: center;
  color: red;
}

Selektor → Eigenschaft : Wert ; …

Andere Geräte

  • Mobile · Tablet · Desktop
  • Responsive Darstellung
Interaktion

JavaScript

Was ist es

  • Interaktive Komponente einer Seite
  • Reagiert auf Anwender-Aktionen
  • Dateiendung .js

Verknüpfen

  • CSS: im <head>
  • JS: am Ende des <body>
  • Sichert Verfügbarkeit aller Elemente

Vorteile

  • Berechnungen & Logik
  • Dynamische Inhalte
  • Steuerung von DOM & Events

Mit CSS

  • Klassen hinzufügen/entfernen
  • Eigenschaften direkt setzen
  • Feinere Animationssteuerung
h1Elem.style.color = "blue";
Hauptteil

Animationen

Animierbar & nicht

  • Animierbar: alles mit Zwischenschritten
  • Nicht: Schriftarten, Listenzeichen, Tabellenstruktur

Vorteile

  • Lebhafte, dynamische UI
  • Wenige Zeilen Code

Bessere Leistung als JS

  • Browser-optimiert (GPU)
  • Flüssig auch bei Last

Eigenschaft animation

  • timing · dauer · iteration · delay
p {
  animation-duration: 3s;
  animation-name: slide-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Beispiel-Website: apple.com/ipad-pro

Auf alle Personen achten

  • prefers-reduced-motion beachten
Übersicht

Animationen in CSS

Drei zentrale Arten — ganz ohne JavaScript:

Transitions

Fließende Übergänge zwischen zwei Zuständen

Keyframes

Mehrstufige, zeitgesteuerte Bewegungsabläufe

Scroll-driven

Animationen reagieren auf das Scrollen

Hover mich
Keyframe
Animation

Transition

Wirkung & Zweck

  • Glättet Eigenschaftswechsel
  • Zustandsbasierte Interaktion (Hover, Focus)
  • Browser berechnet Zwischenschritte

Reihenfolge im Shorthand

transition: property duration timing-function delay;

Die 4 Eigenschaften

  • transition-property — welche Eigenschaft
  • transition-duration — wie lange
  • transition-timing-function — Verlauf
  • transition-delay — Verzögerung
Live-Demo · Hover
Animation

Keyframe-Animation

Vergleich zu Transition

  • Transition: linear zwischen zwei Zuständen
  • Keyframe: mehrstufig, komplex, wiederverwendbar

Konzept

  • Wie klassische Zeichentrickfilme
  • Schlüsselbilder bei 0% … 100%
  • Browser rendert dazwischen
@keyframes slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

Eigenschaften

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-fill-mode (forwards/backwards)
  • animation-delay
Endlos · alternate
Neu

Scroll-driven Animationen

Animationen, die am Scrollvorgang gekoppelt sind — ersetzen JS-Lösungen.

Progress-Timeline · scroll()

  • Folgt absolutem Scrollfortschritt
  • Fortschrittsbalken, Parallax

View-Timeline · view()

  • Folgt Sichtbarkeit eines Elements
  • Einblenden beim Eintritt in den Viewport

Eigenschaften

animation-timeline animation-range scroll-timeline-name scroll-timeline-axis

Bespiel
Praxis

Animationen in der Praxis

Wirkung

  • Intuitive Benutzeroberflächen
  • Lebendig & dynamisch
  • Lenkt Aufmerksamkeit

Gründe der Nutzung

  • Markenbildung & Wiedererkennung
  • Bessere User Experience
  • Daten visualisieren

Beispiele

Schluss

Fazit

Emotion

Animationen wecken Aufmerksamkeit & Gefühle — wir reagieren instinktiv auf Bewegung.

Weniger ist mehr

Zu viele Animationen verwirren und stören die Nutzung.

Barrierefrei

prefers-reduced-motion respektieren — für Menschen mit Einschränkungen.

Referenzen

Quellen

Download der Ausarbeitung

→ Ausarbeitung herunterladen (PDF)

Fin

Vielen Dank

Fragen? Diskussion?