Stylie - Ein kostenloser CSS-Webanimations-Generator

Wenn Sie mit der CSS3-Syntax zu kämpfen haben und eine einfache Möglichkeit, Animationen zu erstellen Stylie ist ein großartiges Werkzeug zum Speichern.

Dies ist einer von vielen kostenlos Codegeneratoren mit Fokus auf reine CSS-animierte Effekte. Stylie ist völlig kostenlos und Open Source, wird auf GitHub gehostet und wird von einer Keyframe-Bibliothek namens Rekapi unterstützt.

Die Rekapi-Bibliothek verwendet JavaScript, Es ist also eine Alternative zu reinem CSS. Zum Glück unterstützt die Stylie-Web-App beide Methoden Exportieren Sie den Code entweder in reinem CSS oder in JavaScript.

Standardmäßig lädt die erste Seite eine kontinuierliche Animationsdemo mit einer linearen Animation. Sie können damit spielen, indem Sie das bearbeiten Standardeinstellungen in dem Registerkarte Bewegung oder durch Bearbeiten der Registerkarte Keyframes.

In der Keyframes-Liste können Sie Neue Keyframes hinzufügen, bearbeiten Sie die Gesamtdauer, und Ändern Sie die Animationsstile, einschließlich Bewegungen basierend auf der X / Y-Achse.

Zuerst wird das aussehen extrem verwirrend, vor allem, wenn Sie noch nie eine Keyframe-Animation gemacht haben. Je mehr Sie jedoch mit dieser Anwendung spielen, desto sinnvoller ist es.

Standardmäßig haben Sie eine Menge verschiedene Erleichterungsmöglichkeiten sie sind sehr einfach zu personalisieren.

Das Bewegungsdiagramm Es ist viel schwieriger zu lernen, aber es gibt Ihnen weitaus mehr Kontrolle über Ihre Animationen. Stylie lässt dich sogar Speichern Sie benutzerdefinierte Bewegungseffekte und diese wiederverwenden auf der Registerkarte Keyframes für andere Animationen.

Wenn ich mich über etwas beschweren könnte, dann ist es die Web-App Mangel an responsive Design.

Ich konnte nicht die gesamte App auf meinem 13 "MacBook Pro-Bildschirm anpassen, auch wenn der Browser voll maximiert ist. Dies kann ein Problem sein, da die Seite keine vertikale Bildlaufleiste hat und viele Optionen (wie exportierter Code) gefunden werden unten im Einstellungsbereich.

Abgesehen von diesem kleinen Ärger funktionierte ich jedoch auf meinem größeren Monitor einwandfrei. Und das Exportqualität ist wie nichts anderes, was Sie im Internet finden.

Werfen Sie einen Blick auf die Stylie-App, um zu sehen, wie es funktioniert, und versuchen Sie, mit einigen Optionen zu spielen. Sobald Sie Ihre Animation erstellt haben, können Sie Exportieren Sie das CSS oder das JavaScript und verwenden Sie das für jedes Projekt, das Sie mögen.

Wenn Sie Probleme mit der Benutzeroberfläche haben, können Sie sich auch dieses kurze Tutorial ansehen, das sich über 9 Minuten erstreckt und alle wichtigen Funktionen abdeckt.