CSS Keyframe-Animationen

CSS-Animationen werden mittlerweile von allen modernen Browsern unterstützt und ersetzen daher in vielen Bereichen Effekte, die einst nur über JavaScript realisiert werden konnten. Neben den sog. CSS-Transitions sind vor allem die CSS-Keyframe-Animationen interessant. Mit Keyframe-Animationen können komplexe Animationsabläufe über sog. Schlüsselbilder (keyframes) erzeugt werden. Im Gegensatz zu Transitions, die eine Interaktion des Users voraussetzen, können Keyframe-Animationen auch selbstständig ablaufen.

Die Syntax

Eine Keyframe-Animation wird in zwei Teilen aufgebaut. Mit der @keyframes-Regel wird bestimmt, wie die Animation heißen soll, welche Schlüsselbilder es in der Animation gibt und welche CSS-Eigenschaften animiert werden sollen. Die simpelste Keyframe-Animation besteht aus zwei Schlüsselbildern, für den Beginn und das Ende der Animation.

@keyframes meine-animation {
   from {
     /* Eigenschaften zum Beginn der Animation */ 
   }
   to {
     /* Eigenschaften zum Ende der Animation */
   }
}

.mein-selektor {
  animation-name: meine-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* weitere animation-Eigenschaften */
}

Der zweite Teil der Animation wird im Selektor des Objekts, das animiert werden soll notiert. Dazu existieren die animation-Eigenschaften in CSS:

animation-name (Pflichtangabe)

Über die Eigenschaft animation-name definiert man welche Keyframes verwendet werden sollen. Es muss der in der @keyframes-Regel verwendete Name angegeben werden.

animation-duration (Pflichtangabe)

Mit animation-duration wird in Sekunden festgelegt wie lange die Animation dauern soll.

animation-iteration-count (Pflichtangabe)

Mit der Eigenschaft animation-iteration-count wird bestimmt wie oft die Animation ablaufen soll. Mögliche Werte sind das Schlüsselwort infinite für unendliche viele Wiederholungen. Ansonsten kann ein beliebiger Zahlwert angegeben werden.

Beispiel anschauen

animation-timing-function

Mit animation-timing-function wird bestimmt, wie die Animationskurve aussehen soll. Hier existieren die Schlüsselbegriffe ease, steps(<integer>, start), steps(<integer>, end), linear, ease-out, ease-in-out, ease-in für bereits vordefinierte Animationskurven. Wenn eine eigene Kurve verwendet werden soll, kann sie über ein Tool erzeugt und schließend in form von cubic-bezier(<number>, <number>, <number>, <number>) eingefügt werden. Der Standard-Wert ist ease.

Beispiel anschauen

animation-delay

Mit animation-delay wird eine Verzögerung der Animation in Sekunden festgelegt.

Beispiel anschauen

animation-direction

Mit animation-direction kann die Richtung der Animation festgelegt werden. Mögliche Werte sind normalreverse (die Animation wird rückwärts abgespielt), alternate-reverse (die Animation wird bei jedem ungeraden Durchlauf rückwärts abgespielt) und alternate (die Animation wird bei jedem geraden Durchlauf rückwärts abgespielt).

Beispiel anschauen

animation-fill-mode

Mit animation-fill-mode wird festgelegt, wie das Objekt sich verhalten soll, wenn die Animation gerade nicht läuft. Beispielsweise weil über animation-delay eine Verzögerung eingestellt wurde oder die Animation bereits abgelaufen ist. Es sind folgende Werte erlaubt: noneforwards (Zustand zum Ende der Animation), backwards (Zustand zum Beginn der Animation), both (kombinierte Werte aus dem Beginn und dem Ende der Navigation)

animation-play-state

Mit animation-play-state wird festgelegt ob die Animation abgespielt wird oder pausiert. Mit dem Wert running wird die Animation abgespielt, mit paused pausiert. Dies macht in Kombination mit Mouse-Over-Effekten oder JavaScript Sinn.

Beispiel anschauen

Kurzschreibweise

Die Kurzschreibweise für die oben genannten animation-Eigenschaften lautet animation. Die Werte müssen in folgender Reihenfolge angegeben werden.

.selektor {
   animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]
}

Animationen mit mehreren Schlüsselbildern

Innerhalb der @keyframes-Regel können beliebig viele Schlüsselbilder angegeben werden. Wenn es mehr als zwei sind, wird die Position auf der Zeitleiste in Prozent angegeben.

@keyframes meine-animation {
  0% {
     /* Eigenschaften zum Beginn der Animation */  
  }

  50% {
     /* Eigenschaften nach der Hälfte der Animation */    
  }

  100% {  
    /* Eigenschaften zum Ende der Animation */   
  }
}

Es können auch Werte zusammengefasst werden.

@keyframes meine-animation {
  0% {
     /* Eigenschaften zum Beginn der Animation */
  }

  25%, 75% {
     /* Eigenschaften von 1/4 bis 3/4 der Animation */ 
  }

  100% {  
    /* Eigenschaften zum Ende der Animation */   
  }
}

Beispiel 1: Objekte bewegen und Farbe wechseln

Das folgende Beispiel zeigt, wie eine Keyframe-Animation aufgebaut sein kann. Wir bewegen einen <div> zwischen vier Koordinaten und wechseln zusätzlich die Farbe.

<div class="mein-element"></div>
.mein-element {
   height: 120px;
   width: 120px;
   background: silver;
   border-radius: 100%;
   position: absolute;
   animation-name: meine-animation;
   animation-duration: 4s;
   animation-iteration-count: infinite;
}

@keyframes meine-animation {
   0%, 100% {
     background-color: red;
     top: 50px;
     left: 50px;
   }

   25% { 
     background-color: gold;
     top:50px;
     left:600px;
   }

   50% {
     background-color: lime;
     top: 600px;
     left: 600px;
   }

   75% {
     background-color: blue;
     top:600px;
     left:50px;
   }
}

Beispiel anschauen

Mit weiteren Elementen und der animation-delay-Eigenschaft, kann der Effekt noch ansprechender gestaltet werden:

<div class="mein-element"></div>
<div class="mein-element"></div>
<div class="mein-element"></div>
<div class="mein-element"></div>
.mein-element:nth-of-type(2) {
   animation-delay:1s;
   animation-fill-mode:backwards; 
}

 .mein-element:nth-of-type(3) {
   animation-delay:2s;
   animation-fill-mode:backwards;
}

 .mein-element:nth-of-type(4) {
   animation-delay:3s;
   animation-fill-mode:backwards;
}

/* Der übrige CSS-Code ist mit oben gezeigten Beispiel identisch */

Beispiel anschauen

Beispiel 2: Animierte Grafik

Das zweite Beispiel zeigt einen Hai der im Meer schwimmt. Der Hai selbst bewegt sich dabei nur minimal nach links und rechts, der Effekt entsteht in erster Linie durch die Verschiebung des Hintergrunds. Das Beispiel verwendet mehrere Hintergrundbilder um ohne überflüssige HTML-Elemente auszukommen. Darüber hinaus wird in diesem Beispiel die Kurzschreibweise für Animationen verwendet.

<div></div>
div {
   width:800px;
   height:600px;
   background-color:#034557;
   background-image: url(hai.png), url(fische.png);
   background-position: top 150px left 120px, 110px 90px;
   background-repeat: no-repeat, repeat-x;
   animation:ocean .75s infinite linear;
} 

@keyframes ocean {
   0%{
     background-position: top 150px left 120px, 110px 90px;   
   }
   50% {
     background-position: top 150px left 100px, 362px 90px; /* Die Fische werden um die Häfte der Breite der fische.png-Grafik verschoben */   
   } 
  100% {
     background-position: top 150px left 120px, 615px 90px; /* Die Fische werden um die volle Breite der fische.png-Grafik verschoben */    
  }
}

Beispiel anschauen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-animation feature across the major browsers from caniuse.com

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 4 Kommentare

  1. Sascha
    schrieb am 24.08.2019 um 20:47 Uhr:

    > Im Gegensatz zu Transitions, die eine Interaktion des Users voraussetzen, können Keyframe-Animationen auch selbstständig ablaufen.

    Mit etwas JavaScript geht das auch mit Transitions. Wenn die Werte der animierten CSS Attribute per Script geändert werden, dann laufen die entsprechenden Animationen auch selbstständig ab. Wenn man eine Funktion für das Ereignis ‚transitionend‘ via addEventListener() registriert, lassen sich sogar mehrere Transitions miteinander verketten, indem man in der Funktion weitere CSS Attribute ändert.

    Antworten
  2. Andreas Anton
    schrieb am 09.03.2016 um 00:29 Uhr:

    Gute, übersichtliche Anleitung für den Einstieg! Allerdings ist iteration-count keine Pflichtangabe!
    LG Toni

    Antworten
  3. Uwe
    schrieb am 22.10.2015 um 08:25 Uhr:

    Danke! Einfach nur Danke. :-)
    Du hast dieses nicht ganz triviale Thema so großartig nachvollziehbar und Schritt für Schritt erklärt. Für mich endlich der Einstieg.
    Liebe Grüße
    Uwe

    Antworten
    • Beat Dietschweiler
      schrieb am 02.03.2020 um 17:39 Uhr:

      Diesem Kommentar möchte ich mich anschliessen und sage ebenfalls danke!! Auch 5 Jahre später ein cooles Thema. Herzliche Grüsse, Beat

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →