So erstellen Sie Animationen mit Keyframes

So erstellen Sie animierte Effekte auf Ihre Website auf dem iPad und iPhone angezeigt werden, müssen Sie Keyframes zu verwenden. Komplexere CSS 3 Animationen setzen auf Keyframes. Keyframes sind die Punkte innerhalb einer Animation, wo sich etwas ändert. Jedes Mal, wenn Sie ein animiertes Objekt ändern möchten, müssen Sie ein neues Schlüsselbild zu erstellen.

Zum Beispiel, wenn Sie einen Ball prallt animieren möchten, wie es in dieser Figur gezeigt, müssen Sie an der Spitze des Bounce einen Keyframe zu haben, und eine weitere an der Unterseite der prallen.

In diesem Beispiel ist die Kugel 50 Pixel im Durchmesser, und der Behälter für die Kugel 350 Pixel hoch. Der erste Keyframe daher legt sich den Ball an der Unterseite des Behälters, und der letzte legt sie an der Oberseite des Behälters.

Hier ist der Code, der diese Arbeit macht:

@ -webkit-Keyframes abprallen {von {margin: 300px auto 0-} bis {margin: 0 auto 0-}}

Ein @ -webkit-Keyframes Block enthält Regeln, die jedes Keyframe definieren. Ein Keyframe definiert die Art für diesen Moment in der Animation. Sie können einen Anfang und ein Ende haben, wie in dem hier gezeigten Beispiel, oder Sie können eine beliebige Anzahl von Punkten in-zwischen definieren. Einige Web-Browser gelten diese Art glatter als andere, aber Safari auf dem iPhone und iPad machen diese Arbeit recht gut.

In diesem einfachen Beispiel Ball prallt, eine Animation genannt prallen definiert ist, zwei Keyframes zu haben: eine für den Start der Animation (die von Block) und eine für das Ende (das nach Block). Diese beiden Keyframes bewegen den Ball von der Boden nach die Spitze.

Wenn Sie eine Animation mit einem Satz von Keyframes definieren, können Sie die folgenden Befehle verwenden Webkit-Animation Eigenschaften:

• Animation-name - definiert die verwendete Animation. Richten Sie es auf prallen, die Keyframe früher definiert. Wenn der Name nicht gefunden wird (es fehlt oder falsch geschrieben), nimmt der Browser den Standardwert keiner und keine Animation erzeugt wird:

  -Webkit-Animation-name: Sprung-

• Animation-Dauer - definiert die Länge der Animation. Der Zeitwert Format ist eine Zahl von einer Zeiteinheit Kennung gefolgt. Die Zeiteinheit Identifikatoren Frau für Millisekunden und s für Sekunden (1000 ms, 1s). Die Animation des hüpfenden Ball dauert eine Sekunde.

  Die Abbildung zeigt, wie der Browser die automatisch erstellt getweente Rahmen - die Rahmen zwischen oben und unten. Sie definieren den Anfang und das Ende und der Browser füllt, was # 147-in-seinTween.# 148;

  Webkit-Animation-Dauer: 1S-

• Animation-Iteration-count - definiert die Anzahl, wie oft ein Animationszyklus gespielt. Der Standardwert ist 1, und dieser Wert macht die Animation Spiel von Anfang einmal zu beenden. Ein Wert von unendlich bewirkt, dass die Animation für immer zu wiederholen. Wie Sie auf diese Informationen erraten basierend könnte, im folgenden Beispiel spielt die Animation zehnmal:

  -Webkit-Animation-Iteration-count: 10-

• Animation-Richtung - legt fest, ob die Animation umgekehrt jedem anderen Zyklus zu spielen. Ob wechseln angegeben ist, wird jeder andere Animationszyklus in umgekehrter Richtung statt. Wenn eine Animation in Rückwärts gespielt wird, werden die Timing-Funktionen auch umgekehrt.

  Aus diesem Grund ist man den Ball zu definieren müssen als nur hüpfte auf. Die alternative Animation wird in umgekehrter Reihenfolge gespielt, den Ball zu bringen wieder auf den Boden der Box (nicht anders als die Schwerkraft).

-Webkit-Animation-Richtung: alternate-

Setzen Sie alles zusammen und die Stilregel, die die hüpfenden Ball Animation Arbeit macht sieht wie folgt aus:

#animationDemo #ball {-webkit-Animation-name: bounce - Webkit-Animation-Dauer: 1s - Webkit-Animation-Iteration-count: 10 - Webkit-Animation-Richtung: alternate-}

Wenn Sie eine oder mehrere Eigenschaften eingeben, stellen Sie sicher, dass diese Reihenfolge zu folgen:

1. Übergang-Eigenschaft

2. Übergangszeit

3. Übergang-Timing-Funktion

4. Übergang-Verzögerung

Verwenden Sie die folgende Anweisung für die hüpfenden Ball Demonstration:

#animationDemo #ball {Bounce 1s 10 alternate-}

Für eine vollständige Liste der CSS-Eigenschaften können Sie mithilfe von Übergängen, Besuch animieren CSS Transitions Module Stufe 3.