So verwenden CSS3 Animationen
Das verwandeln Verhalten ist ziemlich cool, aber CSS3 verspricht noch spannender Form der Animation der (warten, bis es genannt) Animation Mechanismus. Hier ist eine Animation einer Box auf dem Bildschirm zu bewegen.
Hier ist die grundlegende Strategie eine CSS-Animation für den Bau:
Erzeugen Sie eine Reihe von Keyframes.
Animationen werden auf den Begriff der Keyframes basiert. Jeder Keyframe gibt den Zustand eines Objekts, und der Browser versucht, gleichmäßig zwischen den Keyframes übergehen.
Geben Sie einen Prozentsatz für jeden Keyframe.
Der Keyframe beginnt mit einem Prozentsatz, der anzeigt, wo in der Animation der Keyframe passieren wird. Der erste Keyframe sollte 0% (der Beginn der Animation) sein und das letzte sollte 100% (das Ende der Animation) sein. Sie können beliebig viele Zwischen Keyframes anzuzeigen, wie Sie wollen.
Fügen Sie einen Mini-Stylesheet für jeden Keyframe.
Legen Sie alle Stile, die Sie in einem kleinen Stylesheet geändert werden sollen. An der angegebenen Stelle in der Timeline, ein Element, um diese Animation folgenden wird der angegebene Stil Verhalten. Sie können jede mögliche Art Informationen, die Sie hier wollen platzieren.
Tragen Sie die Animation auf Ihre Elemente.
Das Animation Regel können Sie einen Keyframe auf ein Element anzuwenden. Sie können die gleichen Keyframes unter vielen verschiedenen Elemente wiederverwenden, wenn Sie wollen.
Ändern Sie die Animation.
Sie können zu einer Animation viele der gleichen Merkmale gelten, wie Sie einen Übergang zu tun. Es gibt eine Reihe von Parametern ab, aber die am häufigsten verwendeten Elemente sind Keyframe, Zeit, und wiederholen.
Werfen Sie einen Blick auf den Code für animation.html alles in Aktion zu sehen:
animation.html Umzugskarton
Es gibt eine Reihe von Dingen zu diesem Beispiel beachten:
Erstellen eines Keyframes Satz genannt Das @keyframes Regel verwendet, um eine Seitenebene Ressource zu erstellen, die in dem Rest der CSS verwendet werden kann. In diesem Fall wird es verwendet, um einen Keyframe zu erzeugen.
Erstellen browserspezifischen Versionen: Leider erfordert die Animation Mechanismus noch browserspezifische Präfixe. Es ist in der Regel am einfachsten ein Browser zum Ziel und dann für die anderen Browser zu kopieren, wenn das grundlegende Verhalten funktioniert.
In diesem Beispiel wird ein Element in einem quadratischen Muster: Aus diesem besonderen Beispiel ein div wird in einer quadratischen Bewegung bewegen. Wie Sie an den Keyframes anschauen, werden Sie auf der linken Seite und Top-Position eine einfache Änderung des sehen, dass div wurde im Laufe der Zeit gemacht.
Machen Sie Anfang und Ende die gleiche: Wenn Sie planen, diese Animation kontinuierlich laufen zu lassen, möchten Sie den Anfang und Orte endet die gleiche sein.
Tragen Sie die anim Keyframe auf das Element gesetzt: Tragen Sie die anim Keyframe durch die Verwendung von Animation Regel.
Geben Sie die Länge der Animation: Animationen sind über Veränderungen im Laufe der Zeit, so dass die Animation Tag erfordert auch eine Dauer, gemessen in Sekunden (s) oder Millisekunden (ms).
Bestimmen Sie die Lockerung: Lockerungs ist, wie die Animation wirkt am Anfang und Ende eines Animationssegment. Das linear hier in der Regel verwendet, hält die Animation mit einer konstanten Geschwindigkeit. Sie können auch verwendet werden (das Standardverhalten) Leichtigkeit-in-out Verschieben Sie das Element mit einer variablen Geschwindigkeit zu machen.
Bestimmen die Anzahl der Wiederholungen: Sie können mehrmals angeben, um die Animation zu wiederholen. Wenn Sie diesen Teil auslassen, wird die Animation nur einmal geschehen, wenn die Seite geladen wird. Sie können unendlich geben Sie die Animation wiederholen, solange die Seite im Speicher zu machen.
Hinweis: Es gibt viele andere Parameter, die Sie festlegen können, wie zum Beispiel Lockerung und verzögern. Diese können durch die festgelegt werden Animation Regel oder mit einzelnen Regeln. Denn jetzt können Sie Ihre Animationen so einfach wie möglich zu halten, zumindest bis der Browser alle verwalten können Animationen ohne Anbieter-Präfixe.