CSS-Animationsgenerator

Der CSS Animation Generator ist ein visueller Editor für CSS-Keyframe-Animationen Sie wählen eine voreingestellte Bewegung wie Einblenden, Einblenden, Verkleinern, Zoomen, Bounce, Spin oder Puls, passen die Dauer, Timing-Funktion, Verzögerung, Iterationsanzahl, Richtung und Füllmodus an, sehen, wie sie in einer Live-Vorschau ausgeführt wird, und kopieren dann zwei Dinge: die @keyframes-Regel, die die Bewegung definiert, und die Animationskurzschrift, die sie abspielt. Sie verwandelt einen CSS-Block, den die meisten Menschen aus dem Speicher oder einem Framework kopieren, in etwas, das Sie formen und sehen können, bevor es Ihr Stylesheet erreicht.

Eine CSS-Animation hat zwei Hälften, die übereinstimmen müssen Die @keyframes-Regel benennt eine Folge von Schritten, die jeweils als prozentualer Offset mit den Eigenschaftswerten geschrieben werden, die das Element an diesem Punkt halten soll, zum Beispiel 0% bei Opazität 0 und 100% bei Opazität 1. Die Animationseigenschaft verweist dann auf diesen Keyframe-Namen und steuert, wie er abgespielt wird: wie lange er dauert, wie er sich entspannt, wie lange man mit dem Start wartet, wie oft wiederholt werden muss und in welche Richtung jeder Durchgang ausgeführt wird Ein falsch geschriebener Name ist der häufigste Grund, warum eine Animation stillschweigend nichts tut, da der Browser keine Regel hat, an die er binden kann.

Alles läuft in Ihrem Browser Wählen Sie eine Voreinstellung, ziehen Sie die Dauer - und Verzögerungs-Schieberegler, wechseln Sie die Lockerungskurve, stellen Sie die Animation auf ewig oder eine feste Anzahl von Malen wiederholen, und drücken Sie die Wiedergabe, um sie erneut anzusehen Das Tool schreibt die Kurzschrift in sicherer Reihenfolge mit dem Keyframe-Namen zuerst, lässt die Verzögerung fallen, wenn sie Null ist, und lässt jeden Teil weg, der seiner CSS-Voreinstellung entspricht, damit die Ausgabe lesbar bleibt Es gibt kein Konto, nichts wird hochgeladen, und der Generator arbeitet weiter, sobald die Seite geladen wurde.

Es macht auch die Performance-Kompromisse sichtbar Die Presets animieren Transform und Opazität wo immer möglich, denn diese beiden Eigenschaften werden vom Compositor gehandhabt und zwingen den Browser nicht, Layout neu zu berechnen, so bleiben sie bei hohen Bildraten glatt, Animieren von Breite, Höhe, Ober - oder Rand berechnet stattdessen die Seite auf jedem Frame neu und ist die übliche Ursache für StotternSehen Sie einen Bounce, der von translaTE statt von oben aufgebaut wurde, ist eine schnellere Lektion, warum man glatt ist, als jede Menge darüber zu lesen.