CSS Animation Generator
Stelle eine Keyframe-Animation mit Dauer, Easing und Verzögerung zusammen, sieh sie laufen und kopiere den @keyframes-Block zusammen mit der animation-Kurzschreibweise.
Browser-Tool
Erzeugter Code
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.animated {
animation: fade-in 0.8s ease-out 1 both;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
Über CSS-Animations-Generator
Keyframes, Timing und Easing, zusammengestellt an einer Live-Vorschau, und der @keyframes-Block entsteht zusammen mit der animation-Kurzschreibweise, denn die beiden sind zwei Hälften einer Sache, und nur eine davon zu kopieren, ist der übliche Fehler. Kostenlos online, ohne dass ein Konto im Weg steht. Die Keyframes entstehen in dieser Seite, nichts, was du hier baust, wird also hochgeladen.
So nutzt du CSS-Animations-Generator
- Die Keyframes bauenWie das Element an jedem Punkt im Ablauf aussieht.
- Dauer, Verzögerung und Easing festlegenOb eine Bewegung natürlich oder mechanisch wirkt, hängt mehr vom Easing ab als von der Dauer.
- Die Schleife ansehenBeurteile sie im Lauf statt als Beschreibung. Eine Animation, die in Zahlen gut aussieht, tut das auf dem Bildschirm oft nicht.
- Beide Teile kopierenDie @keyframes-Definition und die animation-Eigenschaft, die darauf verweist.
Animiere transform und opacity, sonst kaum etwas
Diese beiden kann der Compositor übernehmen, ohne das Layout neu zu berechnen oder neu zu zeichnen, und deshalb laufen sie auch unter Last flüssig. Wer width, height, top oder margin animiert, zwingt den Browser, in jedem Frame das Layout neu zu berechnen, und daher kommt das Ruckeln, das eine Oberfläche billig wirken lässt. Etwas zu bewegen heißt transform: translate, nicht ein sich änderndes left.
Was das Tool nicht kann
- Respektiere prefers-reduced-motion. Manche Menschen bekommen von Bewegung echte Übelkeit, und eine Animation ohne Möglichkeit, sie abzuschalten, ist ein Barrierefreiheitsfehler und keine Verzierung.
- Lange oder endlos laufende Animationen ziehen dauerhaft Aufmerksamkeit auf sich, und das braucht eine Seite nach der ersten Sekunde selten.
CSS-Animations-Generator: häufige Fragen
- Warum ruckelt meine Animation?
- Meist, weil sie eine Eigenschaft animiert, die ein neues Layout erzwingt: width, height, top, left, margin. Der Wechsel zu transform und opacity überlässt die Arbeit dem Compositor und behebt das Ruckeln meist vollständig.
- Muss ich reduzierte Bewegung berücksichtigen?
- Ja. Pack nicht notwendige Animationen in eine prefers-reduced-motion-Media-Query und biete eine stillstehende oder viel dezentere Alternative an. Es ist eine Absicherung in einer Zeile, und sie ist echten Menschen wichtig.
- Kann es eine CSS-Transition für einen Hover-Effekt erzeugen?
- Nein, es schreibt @keyframes-Animationen und startet mit Vorlagen wie fade, slide, scale, pulse, bounce, shake, spin und flip. Eine Hover-Transition nutzt die eigene Eigenschaft transition, die dieses Tool nicht erzeugt. Dauer, Verzögerung, Easing, Anzahl der Wiederholungen, Richtung und Füllmodus der Keyframe-Animation kannst du trotzdem einstellen.
Fragen zu ToolsVerse selbst – Datenschutz, Kosten, was mit deinen Dateien passiert – beantworten die häufig gestellten Fragen.
Ähnliche Tools
Die Tools, die man zusammen mit CSS-Animations-Generator am häufigsten braucht.
Du findest das passende Tool nicht?
Sag uns, was du suchst, und wir prüfen, ob wir es hinzufügen.