CSS Animation Generator

Skapa CSS keyframe-animationer visuellt med liveförhandsvisning. Välj bland förinställningar som bounce, pulse, shake, spin. Justera varaktighet, timing och mer. Kopiera CSS-kod. Gratis onlineverktyg.

Förhandsvisning

Animationsförinställning

Varaktighet

1.0s

Tidsfunktion

Fördröjning

0.0s

Iterationer

Oändlig

Riktning

Fyllningsläge

CSS-utdata

Referens

Vad är CSS-animationer?

CSS-animationer låter dig animera övergångar mellan CSS-egenskapsvärden över tid. De består av två delar: @keyframes-regler som definierar animationsstegen, och animation-egenskapen som styr timing, riktning och uppspelning.

Animationsförinställningar

Detta verktyg inkluderar vanliga animationsförinställningar: bounce (vertikal studs), pulse (skalering upp och ner), shake (horisontell skakning), spin (360° rotation), fadeIn/fadeOut (opacitetsövergångar), slideIn/slideOut (glidning från sidan), swing (pendelrotation) och wobble (asymmetrisk skakning).

Integritet

All animationsgenerering körs 100 % i din webbläsare. Ingen data skickas till någon server.

← Tillbaka till alla verktyg