CSS Animation Tutorial – Transition, Animate, Keyframes

CSS Animation Keyframes Steffen Lippke Coding Tutorial Coding Lab

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:

Bouncer Animation Hover - CSS Animation Tutorial Steffen Lippke Coding Lab-min

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

Selektor[,Selektor2] {
  Gestaltungsregel1;
 Gestaltungsregel2;
}

SelektorReferenziert auf …
.groupSelektiert alle Element mit der class=“group“Nutze Gruppen immer bei 2+ Elementen!
#singleElementSelektiert GENAU 1 Element. Niemals mehr!
.bigButtons, .tinyButtons, .#cta-buttonEin Komma fasst Selektoren vor dem Schleifen-Rumpf zusammen.
#wrapper.group1Eine 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.
pAlle Paragraphen (bzw. jedes anderes HTML-Tag) ist selektiert
Die wichtigsten Selektoren in CSS

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

CSS Transition Button Hover - CSS Animation Tutorial Steffen Lippke Coding Lab
CSS Transition Button Hover – CSS Animation Tutorial Steffen Lippke Coding Lab
  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).
Bouncer Animation Hover - CSS Animation Tutorial Steffen Lippke Coding Lab-min

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

Developer Tools helfen - CSS Tutorial Steffen Lippke Coding Lab
Developer Tools helfen - CSS Animation Tutorial Steffen Lippke Coding Lab

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.

Danke fürs Lesen! Erhalte weitere Tutorials in meinem kostenlosen Newsletter.
Jeden Monat teile ich mit Dir 4 neue praxisnahe Tutorials.
Trage Deine Mail zum kostenlosen Empfang des Newsletters* ein.




Quellenangabe Bilder: Icons und SVG-Grafiken im Titelbild von Microsoft PowerPoint 2019, frei verfügbar nach EULA
*) Mit dem Abonnement des Newsletters erklären Sie sich mit der Analyse des Newsletters durch individuelle Messung, Speicherung und Analyse von Öffnungsraten und der Klickraten in Profilen zu Zwecken der Gestaltung künftig besserer Newsletter einverstanden. Sie können die Einwilligung in den Empfang des Newsletters und die Messung mit Wirkung für die Zukunft widerrufen. Mehr in der Datenschutzerklärung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.


Jeden Monat teile ich mit den Mitgliedern
4 neue praxisnahe ausführliche Tutorials (je 1000+ Wörter).


Trage Deine Mail, damit Du
Deine Coding + Hacking Skills erweitern kannst!

Die Website nutzt nur technisch notwendige Cookies.