Erstellen Sie mit Animista problemlos CSS-Animationen

Es gibt Tonnen von CSS-Animations-Web-Apps online. Aber nur sehr wenige vergleichen mit dem Detaillierungsgrad und der Benutzerfreundlichkeit, die Sie erhalten Animista.

Diese kostenlose Web-App ermöglicht es Ihnen Erstellen Sie benutzerdefinierte CSS-Animationen auf Knopfdruck. Sie können zwischen vordefinierten Bewegungen wie Folien, Transformationen, Schwüngen und sogar Schatten-Drop-Animationen wählen.

Sobald Sie Ihre Animation erstellt haben, können Sie Exportieren Sie den Code genau wie bei anderen CSS-Generatoren. Abgesehen davon ist dieser Code viel einfacher zu handhaben und sogar kommt mit einem eingebauten Minifier-Tool.

Die Benutzeroberfläche kann sich zunächst verwirrend anfühlen, aber das hängt nur davon ab, wie viele Optionen Sie haben!

Sie erstellen benutzerdefinierte Animationen folgende drei Hauptschritte und über die Schnittstelle von oben nach unten:

1. Wählen Sie einen Bewegungsstil (Schaukeln, Rutschen, Flip-Skala) von den Kreisen oben
2. Passen Sie es mit verschiedenen Bewegungsarten an unterhalb
3. Bearbeiten Sie Ihre Animationsoptionen in der schwebenden linken Optionsleiste

Durch diesen Vorgang können Sie die Gesamtdauer der Animation, den Beschleunigungsstil, die Verzögerung und so ziemlich alles ändern. Und das alles arbeitet durch reines CSS3, Das macht es noch beeindruckender.

Beachten Sie auch an der obersten Navigationsleiste, zwischen der Sie wählen können verschiedene Arten von Animationszielstilen.

Das Standardeinstellung ist “Basic” das kann so ziemlich alles bearbeiten (Schweben, Klicken oder sofortige Animation). Andere Ziele sind Seitentext, Hintergrundanimationen und sogar benutzerdefinierte Eingangsanimationen um ein verstecktes Seitenelement sichtbar zu machen.

Ich mag besonders die “Beachtung” Link oben, der einige coole Shake- und Jitter-Effekte für Button-Styles bietet. Diese Funktionen eignen sich hervorragend für CTA-Schaltflächen, um Aufmerksamkeit zu erregen und Benutzerinteraktionen zu fördern.

Sobald Sie mit den Anpassungen fertig sind, tun Sie einfach Klicken Sie auf das kleine Klammer-Symbol in der rechten oberen Ecke des Vorschaufensters.

Dadurch wird eine neue Seite mit angezeigt Ihre vollständige CSS-Animationsklasse zusammen mit den Keyframes. Optionale Funktionen ermöglichen es Ihnen Minimieren Sie den Code und Fügen Sie den automatischen Präfix hinzu das ältere Browser unterstützt.

Ich habe unzählige benutzerdefinierte CSS-Animationswerkzeuge verwendet, und zweifellos ist Animista das umfangreichste Werkzeug. Es ist völlig kostenlos und zunächst etwas komplex, aber sobald Sie die Schnittstelle verstanden haben, ist dies bei weitem der beste Generator, den Sie verwenden können.

Um es auszuprobieren, besuchen Sie einfach die Homepage und klicken Sie auf “Versuch mich doch mal”. Sie können Ihre Gedanken und Komplimente auch mit dem Ersteller der Web-App @ ana108 teilen.