CSS Animation Tutorial – Transition, Animate, Keyframes

Du willst eine CSS Animation mit Keyframes kreieren?

CSS kann ganz ohne JavaScript die Webseite dynamisch und ansprechend gestalten.

Ich zeige Dir, wie Du CSS Animationen in Deine Webseite einbauen kannst.

Schritt für Schritt. Starten wir!

Grundlagen für die CSS Animation

HTML stellt das Web-Grundgerüst mit den Inhaltselementen Text, Bild, Link, Tabelle, Audio, Video usw. bereit.

Die Cascading Stylesheets (CSS, kaskadierende Gestaltungsbögen) bringen Farbe und Bewegung in die Inhalte der HTML. JavaScript kann die Webseite zusätzlich Client-seitig verändern, sodass der Browser nicht bei jeder Interaktion neu laden muss.

Wie funktionieren CSS-Selektoren?

Du kannst auf das HTML-Grundgerüst referenzieren (deuten), indem Du mit einem Selektor auf einzelne Elemente oder Gruppen von Elementen verweist. Eine Coole CSS Animation kannst Du damit gestalten z. B. der Bouncer:

Wenn Du die HTML-Elemente referenzierst, definierst Du im Schleifen-Rumpf die Gestaltung der Elemente:

Selektor[,Selektor2] {
  Gestaltungsregel1;
 Gestaltungsregel2;
}

Selektor	Referenziert auf …
.group	Selektiert alle Element mit der class=“group“ – Nutze Gruppen immer bei 2+ Elementen!
#singleElement	Selektiert GENAU 1 Element. Niemals mehr!
.bigButtons, .tinyButtons, .#cta-button	Ein Komma fasst Selektoren vor dem Schleifen-Rumpf zusammen.
#wrapper.group1	Eine Verkettung von Elementen entspricht eine Verschachtelung.
#div:hover	:hover ist aktiviert, wenn Mauszeiger über dem Element sich befindet.
input:focus	:focus ist aktiviert, wenn Cursor im Eingabefeld sich befindet.
.div:first-child bzw. :last-child	:first-child selektiert das erste bzw. das letzte Element einer Gruppe.
p	Alle Paragraphen (bzw. jedes anderes HTML-Tag) ist selektiert

Praxis mit HTML, CSS (optional JavaScript)

Ich zeige Dir im Folgenden wie Du …

• Transition
• Transform
• Animation

… in CSS effektiv nutzt. Dieser Guide lehrt Dich alle Grundlagen.

Die fortgeschrittenen, aufwendige Animationen bauen auf den 4 Grundbefehle auf.

Voraussetzungen für die CSS Animation

Du brauchst…

• einen Browser (Firefox, Vivaldi, Brave, Chrome)
• Code Editor wie Visual Studio Code
• Optional: Developer Tools im Browser

Projekt anlegen für die CSS Animation

Gehe wie folgt vor:

1. Erstelle einen neuen Ordner cssAnimations
2. Lege eine HTML Datei
   index.html
   an
3. Füge den Basis-Code eine funktionierenden HTML hinzu
4. Erstelle ein
   style.css
   als eine Datei für die Beschreibung der Styles und eine JavaScript-Datei
   action.js
   für die Interaktionen auf der Webseite.

Transition – hover CSS Animation am interaktiven Button

1. Erstelle zwei div-Box mit der Klasse button.
2. Füge einen Titel hinzu.
3. Wechsel in die CSS-Datei und füge den folgenden Zeilen CSS hinzu:

Das Animationsstatement beschreibt die Animation mit verschiedenen „Adjektiven“:

1. animation-name – Gibt den Keyframes-Namen an (Deine Animation)
2. animation-duration – Wie lange soll die Animation andauern?
3. animation-delay – Wann soll der Browser Deine Animation nach dem Seitenladen anzeigen?
4. animation-iteration-count – Wie oft soll sich die Animation wiederholen (z. B. infinite)?
5. animation-direction – soll der Browser die Animation vorwärts (normal), rückwärts (reverse) oder alterierend (alternate) abspielen?
6. animation-timing-function – entspricht der Transition-Kurve.
7. animation-fill-mode – Wie soll das Element nach der Animation aussehen?... wie nachher (forward) oder im am Anfang (backwards).

Keyframes (@keyframes) – Einführung in die CSS Animation

Keyframes beschreiben Animations-Schritte mit %-Zahlen. Jeder Schritt verändert das Objekt mit neuen oder veränderten Stylesheets und Stylesheet-Parametern.

Keyframes oder fertige Animation (GIF, Video)?

CSS lädt schnell, aber ist bei aufwendigen Animationen sehr komplex. Eine MP4 oder GIF Datei aus einem Animationsstudio sind eine Alternative.

Die Schwierigkeit bei z. B. GIF-Dateien sind ihre Dateigröße, die Deine Webseite zur Schnecke machen. Gerade wenn man eine Bambus-Internet-Leitung hat oder der Mobilfunk seine Drops hat.

Automatisierte Tools wie Only Mega oder Tumult Hype erstellen für Dich reine HTML-Animationen. Du kannst schnell riesige Animation mit Bildern, JavaScript und CSS erstellt haben.

Manche Menschen im Internet-Entwicklung "Deutschland" haben noch ISDN oder 3G.

Weniger ist besser.

Möglichkeiten mit Keyframes - Ideensammlung

• Uhren animieren
• Wolken auf Diener Webseite erscheinen lassen
• Produkte hineinfliegen lassen.
• HTML5-Games bauen
• Bewegung auf Deine Webseite bringen
• Springende Button bauen
• Vögel fliegen lassen
• Coole Ladescreens entwerfen
• Kreative Logins erstellen

Bonus: 4 goldenen Regeln der CSS Animation

Sei kreativ mit den Keyframes, Transitions und Animationen. Alle Animationen aus dem Web basieren auf diesen 3 Grundelementen.

1. Beherrsche: Wiederhole nochmals die Funktionen und Möglichkeiten
2. Verwende alternativ: Kombiniere Effekte und Animationen, sodass Du die gewünschte Wirkung erzielen kannst.
3. Kenne Trends: Design / Web Design / Effekte wandeln sich alle paar Monate. Bleibe nicht stehen, sondern finde Deinen Stil.
4. Nutze CSS Animationen sparsam: Nur weil Du Animation erstellen kannst, ist eine Animation nicht immer anwenderfreundlich. Animationen können das UX / UI verbessern, wenn diese an der richtigen Stelle dezent Sinn ergeben. Alles andere ist ein Verkünstelung. Gerade ältere Nutzer können von den vielen bewegenden Elementen verwirrt sein.