CSS Animation Tutorial – Transition, Animate [Keyframes in 2020]

CSS Animation Keyframes Steffen Lippke Coding Tutorial Coding Lab
CSS Animation Keyframes Steffen Lippke Coding Tutorial Coding Lab

Bist Du begeistert von einer CSS Animation?

Eine dynamisch gestaltete Webseite wirkt viel erfrischender.

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

Schritt für Schritt.

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.

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 Courser 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

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.

Bei den fortgeschrittenen Animationen geht es „nur noch“ um die geschickte Kombination der 4 Grundbefehle.

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

Schaffe alle Animationen aus CSS-Styles und JavaScript in Verbindung mit der HTML.

  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 Inter-Aktionen 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:

Hier die Erklärung zu den zentralen CSS-Code

  • perspective: 1000px;
    Erzeugt die Perspektive der 3D-gerenderten Karte, die sich gerade umdreht.
  • transition: transform 2s;
    Die Veränderung / Drehung der Karte braucht zwei Sekunden, um die 180 Grad Drehung durchzuführen.
  • transform-style: preserve-3d;
    Als Transformation-Style weist der CSS-Code die Browser-Engine an, die 3D Verzerrung beizubehalten.
  • position: absolute;
    Mit position: absolute; kannst Du ein Objekt (Karte) mit x- und y-Koordinaten im Browser-Fenster exakt ausrichten, ohne das ein anderes Element das positionierte Element verschiebt.
  • -webkit-backface-visibility: hidden;
    Jeder Browser (Chrome, Firefox, Edge alt, Internet Explorer) versteht eigene CSS-Stylesheets. Der Befehl definiert, dass die Rückseite der Vorderseite der Karte nicht durchsichtig ist. Weil jede Browser-Engine den Befehl nicht gleich versteht, muss die CSS jeder Browser anders anweisen (hier für den Safari).
  • transform: rotateY(180deg);
    Der Transform-Befehl beschreibt die eigentliche Aktion bei der Animation. Die Karte soll sich um die y-Achse drehen, sodass die Rückseite zu erkennen ist.
Flip Card Animation - CSS Animation Tutorial Steffen Lippke Coding Lab-min
Flip Card Animation - CSS Animation Tutorial Steffen Lippke Coding Lab-min

Animation und Keyframes – „Button springen lassen“ - Boucer Button

Bouncer Button - CSS Animation Tutorial Steffen Lippke Coding Lab
Bouncer Button - CSS Animation Tutorial Steffen Lippke Coding Lab
  1. Erstelle einen Button wie in Aufgabe 1.
  2. Verändere die Klasse von button zu bouncer.
  3. Der CSS Code sieht wie folgt aus:

Den Bounce-Effekt erzeuge ich mit CSS und Keyframes.

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)?

Ein GIF oder Video können oft einfacher sein.

Die Schwierigkeit bei den Medien-Dateien sind ihre Dateigröße, die Deine Webseite zur Schnecke machen.

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 auf diesen Planeten (u. a. 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.

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.