Keyframe-Animationssyntax

Grundlegende Deklaration & Verwendung

@keyframes name-of-animation {
  0%    { opacity: 0; }
  20%   { opacity: 1; }
  80%   { opacity: 0; }
  100%  { opacity: 1; }
}

.animate-this-element {
  animation: name-of-animation 5s infinite;
}

Sie können beliebig viele „Haltepunkte“ in der @keyframe Animation verwenden, und dies ist eine der Hauptstärken von Keyframe-Animationen. Während CSS transition nur von einem Zustand in einen anderen geht, kann eine Keyframe-Animation während ihres Zeitplans zwischen vielen verschiedenen Zuständen interpolieren.

Wenn eine Animation die gleichen Start- und End-Eigenschaften hat, ist eine Möglichkeit, dies zu tun, die 0% und 100% Werte durch Kommas zu trennen

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

Oder Sie können die Animation immer zweimal (oder eine gerade Anzahl von Malen) laufen lassen und die Richtung auf alternate stellen.

Keyframe-Animation mit separaten Eigenschaften aufrufen

.box {
 animation-name: bounce;
 animation-duration: 4s; /* or: Xms */
 animation-iteration-count: 10;
 animation-direction: alternate; /* or: normal */
 animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
 animation-fill-mode: forwards; /* or: backwards, both, none */
 animation-delay: 2s; /* or: Xms */
}

Animation Shorthand

Trennen Sie einfach alle einzelnen Werte durch Leerzeichen. Die Reihenfolge spielt keine Rolle, außer wenn Sie sowohl Dauer als auch Verzögerung verwenden, müssen diese in dieser Reihenfolge erfolgen. Im Beispiel unten ist 1s = Dauer, 2s = Verzögerung, 3 = Iterationen.

animation: test 1s 2s 3 alternate backwards;

Transform und Animation kombinieren

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Mehrere Animationen

Sie können die Werte durch Kommas trennen, um mehrere Animationen für einen Selektor zu deklarieren.

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

steps()

Die Funktion steps() steuert genau, wie viele Keyframes im Animationszeitraum gerendert werden. Nehmen wir an, Sie deklarieren

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

Wenn Sie steps(10) in Ihrer Animation verwenden, wird sichergestellt, dass nur 10 Keyframes im zugewiesenen Zeitraum ablaufen.

.move {
  animation: move 10s steps(10) infinite alternate;
}

Die Rechnung geht gut auf. Jede Sekunde bewegt sich das Element 10 Pixel nach links und 10 Pixel nach unten, bis zum Ende der Animation, und dann wieder unendlich rückwärts.

Dies kann großartig für Sprite-Sheet-Animationen sein, wie diese Demo von Samurai.

Browser-Unterstützung

Weitere Ressourcen

• MDN Docs
• MDN: CSS-Animationen verwenden
• Kann ich verwenden – Browser-Unterstützung
• Video: Einführung in CSS-Animationen

Alte Vendor-Syntaxen

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}