CSS-Animationsgenerator
Passe Bewegungsvorlagen oder Keyframes an und spiele die Animation zur Kontrolle ab. Du erhältst CSS für die Verwendung auf einer Webseite und ein HTML-Anwendungsbeispiel.
Möglichkeiten
Animation anhand einer Vorlage anpassen
Wählen Sie aus 12 Typen, darunter Einblenden, Ausblenden und Rotation. Passen Sie Dauer und Wiederholung an Ihren Bedarf an.
Auch Zwischenzustände bearbeiten
Legen Sie für jeden Keyframe Bewegung, Drehung, Skalierung und Deckkraft fest und prüfen Sie die erzeugte Animation.
CSS und HTML abrufen
Kopieren oder speichern Sie das Animations-CSS und ein HTML-Anwendungsbeispiel mit derselben Klasse.
Anleitung
Vorlage auswählen
Wählen Sie die gewünschte Animation und legen Sie die Dauer für 1 Wiedergabe fest. Wenn Sie eine andere Vorlage auswählen, werden auch angepasste Einstellungen ersetzt.
Nur benötigte Einstellungen anpassen
Öffnen Sie Wiedergabedetails oder Keyframes, um Zwischenbewegung, Richtung, Wiederholung und weitere Einstellungen zu ändern.
Erstellen und abspielen
Prüfen Sie das Ergebnis mit „CSS erstellen und Vorschau anzeigen“. Wenn Sie Einstellungen ändern, erstellen Sie es erneut.
CSS und HTML abrufen
Wenden Sie das CSS an und fügen Sie einem HTML-Element die Klasse toollet-motion hinzu. Verwenden Sie das HTML-Anwendungsbeispiel zusammen mit dem CSS.
Nützlich, wenn
Eintrittsanimation erstellen
Verwenden Sie eine Vorlage für Einblenden oder Eintritt von unten, um Eintrittsbewegung und Geschwindigkeit anzupassen.
Animation bei Interaktion mit einer Schaltfläche
Ändern Sie die Startbedingung zu Hover oder Tastaturfokus, um eine auf Interaktionen reagierende Animation zu erstellen.
Keyframes und Wiedergabebedingungen verstehen
Zwischenzustände und Dauer
Die % eines Keyframes gibt seine Position innerhalb einer Wiedergabe an. Bei einer 1-Sekunden-Animation liegt 50 % bei 0,5 Sekunden. Easing bestimmt, wie sich Werte zwischen Keyframes ändern.
Bewegung, Drehung und Darstellung
Die horizontale/vertikale Position gibt die Bewegung ausgehend von der ursprünglichen Position an. Skalierung 1 entspricht der Originalgröße; Deckkraft 0 bedeutet transparent, 1 deckend.
Verzögerung, Wiederholung und Richtung
Die Verzögerung wird nur einmal vor dem Wiedergabestart addiert. Bei endlicher Wiedergabe gilt: Gesamtzeit = Verzögerung + Dauer einer Wiedergabe × Wiederholungszahl. „Alternierend“ wechselt zwischen Vorwärts- und Rückwärtsrichtung.
Zustände vor und nach der Wiedergabe
Wählen Sie den Zustand, der während der Verzögerung und nach Wiedergabeende angezeigt wird. Rückwärts- und alternierende Einstellungen ändern, welche Keyframe-Positionen am Anfang und Ende verwendet werden.
Einstellungen für reduzierte Bewegung
Das erzeugte CSS berücksichtigt die Einstellung für reduzierte Bewegung Ihres Geräts. Es stoppt die Animation und verwendet den Endzustand, der durch die konfigurierte Richtung und Wiederholungszahl bestimmt wird. Bei einer Endlosschleife wird der Endzustand der ersten Wiedergabe verwendet.
Häufig gestellte Fragen
Kann ich die Animation nur einmal abspielen?
Deaktivieren Sie „Wiederholen“ und setzen Sie die Wiederholungszahl auf 1. Standardvorlagen beginnen mit einer Wiedergabe; bei Rotation und Schweben ist die kontinuierliche Wiederholung anfangs aktiviert.
Auf welches Element soll ich das CSS anwenden?
Fügen Sie einem HTML-Element die Klasse toollet-motion hinzu und verwenden Sie sie mit dem erzeugten CSS. Das HTML-Anwendungsbeispiel ist ein Fragment für ein button-Element und keine vollständige eigenständige Webseite.
Wie viele Keyframes kann ich erstellen?
Sie können 2–8 Keyframes einschließlich Start bei 0 % und Ende bei 100 % verwenden. Ein neuer Keyframe wird in der Mitte des größten Abstands eingefügt. Anfang und Ende können nicht gelöscht werden; nur ihre %-Positionen sind festgelegt.
Die Vorschau ist nach einer Einstellungsänderung verschwunden.
Bei einer Einstellungsänderung werden Ergebnisse gelöscht, damit Sie nicht versehentlich Bewegung oder Code aus vorherigen Einstellungen verwenden. Erstellen Sie erneut, um die aktuellen Einstellungen zu prüfen.
Warum bewegt sich die Vorschau nicht?
Wenn auf Ihrem Gerät reduzierte Bewegung aktiviert ist, stoppt die Animation. Prüfen Sie bei Hover- und Fokus-Einstellungen auch die Startbedingungen. Wenn Sie zu einem anderen Tab wechseln, pausiert die Vorschau.
Kann ich mehrere Animationen auf derselben Seite verwenden?
Der erzeugte Klassenname und die Keyframe-Namen werden gemeinsam verwendet. Wenn Sie separate Animationen einsetzen möchten, ändern Sie für jede Animation beide Namen und übernehmen Sie die Änderungen in das zugehörige HTML.
Eingaben und Ergebnisse
- Einstellungen
- 12 Vorlagen, 2–8 Keyframes und eine Dauer von 0,2–60 Sekunden.
- Wiedergabe
- Verzögerung von 0–60 Sekunden, 1–100 Wiederholungen oder Endlosschleife, Easing, Richtung, Zustände vor und nach der Wiedergabe sowie Startbedingungen.
- Ausgabe
- CSS und ein HTML-Anwendungsbeispiel. Definiert wird nur die Animation; eine vollständige Webseite oder Videodatei wird nicht erstellt.