TL
Tool Lab
💰Donate
💰Donate

CSS Animation Generator

Build CSS keyframe animations with live preview.

Box
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

Om det här verktyget

CSS-animationsgeneratorn skapar smidiga animationer genom att konfigurera keyframe-förval, timing, varaktighet, fördröjning och iterationer. En liveförhandsvisning visar animationen i aktion.

CSS-animationer med transform och opacity är effektiva eftersom de sammansätts på GPU:n och inte utlöser layout eller repaint.

Hur man använder

  1. Välj en animationstyp från rullgardinsmenyn.
  2. Ange varaktigheten (t.ex. 0.5s, 2s).
  3. Välj en tidsfunktion för att styra easing.
  4. Ange valfritt en fördröjning innan animationen börjar.
  5. Ange antal iterationer (ett tal eller infinite).
  6. Klicka på Spela upp igen för förhandsvisning, sedan Kopiera för att exportera CSS.

Användningsfall

Front-end-utvecklare använder fade- och slide-animationer för att förbättra upplevd prestanda vid innehållsladdning. UI-designers prototypar mikrointeraktioner som knappulsationer.

Vanliga frågor

  • Vad är fill-mode: both? — Animationen tillämpar startstilar innan den börjar och behåller slutstilar efter att den är klar. Det är den mest användbara inställningen.
  • Hur gör jag en animation som loopar för evigt? — Sätt antal iterationer till infinite.
  • Är CSS-animationer bättre än JavaScript? — För enkla effekter föredras CSS-animationer. För komplex sekvensering erbjuder JavaScript mer kontroll.