Keyframe-Animationssyntax - CSS-Tricks

Anonim

Grundlegende Erklärung und Verwendung

@-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+ */ )

Der Kürze halber verwendet der Rest des Codes auf dieser Seite keine Präfixe, bei der Verwendung in der realen Welt sollten jedoch alle Herstellerpräfixe von oben verwendet werden

Mehrere Schritte

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Wenn eine Animation dieselben Start- und Endeigenschaften hat, besteht eine Möglichkeit darin, die Werte 0% und 100% durch Kommas zu trennen:

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

Oder Sie können der Animation jederzeit mitteilen, dass sie zweimal (oder sogar beliebig oft) ausgeführt werden soll, und die Richtung angeben alternate.

Aufrufen der Keyframe-Animation mit separaten Eigenschaften

.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 Kurzschrift

Trennen Sie einfach alle einzelnen Werte durch Leerzeichen. Die Reihenfolge spielt keine Rolle, außer wenn sowohl die Dauer als auch die Verzögerung verwendet werden. Sie müssen in dieser Reihenfolge sein. Im folgenden Beispiel 1s = Dauer, 2s = Verzögerung, 3 = Iterationen.

animation: test 1s 2s 3 alternate backwards

Kombinieren Sie Transformation und Animation

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

Mehrere Animationen

Sie können die Werte durch Kommas trennen, um mehrere Animationen auf einem Selektor zu deklarieren.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Schritte()

Die Funktion step () steuert genau, wie viele Keyframes im Animationszeitraum gerendert werden. Angenommen, Sie erklären:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Wenn Sie die Schritte (10) in Ihrer Animation verwenden, wird sichergestellt, dass in der zugewiesenen Zeit nur 10 Keyframes vorhanden sind.

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

Die Mathematik funktioniert dort gut. Alle eine Sekunde bewegt sich das Element bis zum Ende der Animation um 10 Pixel nach links und um 10 Pixel nach unten und dann für immer wieder umgekehrt.

Dies kann ideal für Spritesheet-Animationen wie diese Demo von simurai sein.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
4 * 5 * 10 12 5,1 *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6,0-6,1 *

Mehr Ressourcen

  • MDN Docs
  • MDN: Verwenden von CSS-Animation
  • Kann ich verwenden - Browser-Unterstützung
  • VIDEO: Einführung in CSS-Animationen