CSS Animation – @keyframes

Mit CSS-Animationen lassen sich Elemente über einen bestimmten Zeitraum hinweg verändern. Der Ablauf kann aus mehreren Zuständen und Wiederholungen bestehen.

Eine Animation startet, sobald sie einem Element zugewiesen wird. Das kann direkt beim Laden der Seite geschehen oder später, zum Beispiel durch eine Klasse, eine Pseudoklasse oder JavaScript. Nach dem letzten Keyframe kehrt das Element standardmässig in seinen ursprünglichen Zustand zurück.

Aufbau einer CSS-Animation

Eine CSS-Animation besteht aus zwei Teilen: @keyframes beschreibt, was passiert. Die Animation-Eigenschaften bestimmen, wie und wann es passiert.

• @keyframesDefiniert die Zustände und Veränderungen der Animation
• Animation-EigenschaftenSteuern Name, Dauer, Geschwindigkeit, Verzögerung und Wiederholungen

Animation-Eigenschaften

• animation-nameName der verwendeten @keyframes-Regel.
• animation-duration Dauer eines Durchlaufs (Zeitangabe).
• animation-timing-function Zeitlicher Verlauf (Keyword oder cubic-bezier()).
• animation-delay Startverzögerung (Zeitangabe).
• animation-iteration-count Wiederholungen (Zahl oder infinite).
• animation-direction Abspielrichtung (Keyword).
• animation-fill-mode Verhalten vor/nach Ende (Keyword).

1. animation-name – Keyframes zuweisen

animation-name verbindet das Element mit einer @keyframes-Regel. Der frei wählbare Name muss an beiden Stellen übereinstimmen.

animation-name: fadeIn;

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

2. animation-duration – Dauer

animation-duration legt fest, wie lange ein vollständiger Durchlauf dauert. Der Standardwert ist 0s; ohne eine Dauer bleibt die Animation deshalb unsichtbar.

animation-duration: 500ms;
animation-duration: 2s;

3. animation-timing-function – Geschwindigkeit

animation-timing-function bestimmt, wie sich die Geschwindigkeit während der Animation verändert.

• linearKonstante Geschwindigkeit
• easeLangsamer Start, schneller Mittelteil und langsames Ende
• ease-inLangsamer Start
• ease-outLangsames Ende
• ease-in-outLangsamer Start und langsames Ende
• cubic-bezier()Individuell definierter Geschwindigkeitsverlauf

animation-timing-function: ease;

4. animation-delay – Verzögerung

animation-delay bestimmt, wie lange vor dem Start der Animation gewartet wird. Der Standardwert ist 0s.

animation-delay: 1s; /* startet nach einer Sekunde */

Negativer Wert

Ein negativer Wert überspringt den Anfang der Animation. Im folgenden Beispiel startet sie sofort bei 25% ihres Ablaufs, als wäre bereits eine Sekunde vergangen.

animation-duration: 4s;
animation-delay: -1s;

5. animation-iteration-count – Wiederholungen

animation-iteration-count bestimmt, wie oft eine Animation abgespielt wird. Der Standardwert ist 1.

• 3Spielt die Animation dreimal ab
• infiniteWiederholt die Animation ohne Ende

animation-iteration-count: 3;
animation-iteration-count: infinite;

6. animation-direction – Richtung

animation-direction bestimmt, in welcher Richtung die Keyframes abgespielt werden. Der Standardwert ist normal.

• normalSpielt die Animation von Anfang bis Ende ab
• reverseSpielt die Animation vom Ende zum Anfang ab
• alternateWechselt bei jeder Wiederholung die Richtung
• alternate-reverseWechselt ebenfalls die Richtung, beginnt aber rückwärts

animation-direction: alternate;

7. animation-fill-mode – Zustand vor und nach der Animation

animation-fill-mode bestimmt, welche Styles ausserhalb der eigentlichen Animationsdauer gelten – je nach Wert vor dem Start, nach dem Ende oder in beiden Phasen. Die Eigenschaft verändert nicht den Ablauf oder die Richtung der Animation. Der Standardwert ist none.

animation-fill-mode ist nur nötig, wenn der erste oder letzte Keyframe auch vor beziehungsweise nach der eigentlichen Animation gelten soll.

• noneDie Keyframe-Styles gelten nur während der Animation
• forwardsDer Zustand am Ende der Animation bleibt erhalten
• backwardsDer Startzustand gilt bereits während eines Delays
• bothKombiniert forwards und backwards

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

backwards spielt die Animation nicht rückwärts ab, sondern übernimmt den ersten Keyframe bereits während des Delays. forwards behält nach dem Ende den letzten Keyframe bei, both kombiniert beides.

animation-fill-mode im Vergleich ansehen.

Kurzschreibweise

Mit animation lassen sich mehrere Animation-Eigenschaften in einer Zeile zusammenfassen.

Die meisten Werte können unterschiedlich angeordnet werden. Bei zwei Zeitangaben ist die erste jedoch immer die Dauer und die zweite die Verzögerung. Eine einheitliche Reihenfolge macht die Kurzschreibweise besser lesbar.

animation: slideIn 2s ease-in-out 0.5s infinite alternate forwards;

• slideInName der Keyframes
• 2sDauer
• ease-in-outGeschwindigkeitsverlauf
• 0.5sVerzögerung
• infiniteWiederholungen
• alternateRichtung
• forwardsZustand nach dem Ende

Bei zwei Zeitangaben ist die erste immer die Dauer und die zweite die Verzögerung.

@keyframes-Syntax

Eine @keyframes-Regel definiert die Zustände einer Animation. Der Name hinter @keyframes verbindet sie über animation-name mit einem Element.

Start- und Endzustand

from entspricht 0%, to entspricht 100%. Die Zustände dazwischen berechnet der Browser.

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Zwischenstufen

Mit Prozentwerten lassen sich zusätzliche Zustände an beliebigen Stellen des Ablaufs definieren.

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0);
    }
}

Animation auf ein Element anwenden

Eine @keyframes-Regel allein erzeugt noch keine Animation. Sie muss über ihren Namen einem Element zugewiesen werden und eine Dauer erhalten.

.box {
    animation-name: fadeIn;
    animation-duration: 2s;
}

Animation Beispiele

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.anim-fade {
  animation-name: fadeIn;
  animation-duration: 5s;
}

@keyframes slideIn {
  from {
    transform: translateX(-50px);
  }
  to {
    transform: translateX(0);
  }
}

.anim-slide {
  animation-name: slideIn;
  animation-duration: 3s;
}

@keyframes rotateBox {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.anim-rotate {
  animation-name: rotateBox;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0);
  }
}

.anim-bounce {
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

8. Animierter Farbverlauf

Der Farbverlauf ist grösser als der sichtbare Bereich. Die Animation verschiebt seine Position und erzeugt dadurch einen fliessenden Farbwechsel.

1. HTML

<div class="animated-gradient"></div>

2. Farbverlauf gestalten

.animated-gradient {
  min-height: 300px;
  background: linear-gradient(
    135deg,
    #ff4d00,
    #ff006e,
    #5f0fdd,
    #00a6fb,
    #ffd60a
  );
  background-size: 300% 300%;
}

3. Bewegung definieren

@keyframes color-shift {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

4. Animation zuweisen

.animated-gradient {
  animation: color-shift 8s ease-in-out infinite alternate;
}

9. Stretch Font

Beim Hover verändern sich gleichzeitig Breite und Gewicht der Schrift. Die Animation startet erst, wenn sich der Mauszeiger über der Schrift befindet.

Mit einem Variable Font geschieht diese Veränderung fliessend. Bei einer statischen Schrift stehen nur einzelne Schriftschnitte zur Verfügung – deshalb kann die Veränderung springen oder unruhig wirken.

1. Variable Font laden

<link href="https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..150,100..900&display=swap" rel="stylesheet">

2. HTML

<div class="font-stage">
  <div class="dynamic-type">STRETCH</div>
</div>

3. Schrift gestalten

.font-stage {
  display: grid;
  min-height: 300px;
  place-items: center;
  overflow: hidden;
  background: indigo;
}

.dynamic-type {
  color: cyan;
  font-family: "Anybody", sans-serif;
  font-size: clamp(4rem, 13vw, 10rem);
  font-weight: 200;
  font-stretch: 60%;
  line-height: 0.8;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

4. Veränderung definieren

@keyframes type-shift {
  0%,
  100% {
    color: cyan;
    font-weight: 200;
    font-stretch: 60%;
  }

  50% {
    color: gold;
    font-weight: 900;
    font-stretch: 150%;
  }
}

5. Animation bei Hover starten

.dynamic-type:hover {
  animation: type-shift 3s ease-in-out 3;
}

font-weight steuert das Schriftgewicht, font-stretch die Breite der Buchstaben. Der verwendete Variable Font muss die angegebenen Werte unterstützen. Sobald der Mauszeiger das Element verlässt, endet die Animation und die Schrift kehrt in ihren Ausgangszustand zurück.

Anybody bei Google Fonts ansehen.

Performance

Für flüssige Animationen eignen sich besonders transform und opacity. Diese Eigenschaften verändern den Dokumentenfluss nicht und können vom Browser meist effizient dargestellt werden.

• transformVerschiebt, dreht oder skaliert Elemente rein visuell
• opacityVerändert die Sichtbarkeit eines Elements

Animationen von Layout-Eigenschaften wie top, left, width oder height können aufwendiger sein, weil der Browser das Layout neu berechnen muss.

Die Puls-Animation und weitere experimentelle Beispiele findest du in der Intensivstation CodePen Collection.

Kurz gesagt

• @keyframes definiert die Zustände und Veränderungen einer Animation.
• animation-name verbindet ein Element mit der passenden Keyframes-Regel.
• animation-duration bestimmt die Dauer eines Durchlaufs.
• Wiederholungen, Richtung und Zustand nach dem Ende lassen sich einzeln steuern.
• transform und opacity eignen sich besonders für flüssige Animationen.

Verwandte Themen

• Transform – Elemente verschieben, drehen, skalieren oder neigen.
• Transition – Zustandsänderungen fliessend darstellen.
• Animation Timeline – Animationen durch Scrollposition oder Sichtbarkeit steuern.