CSS Animation Generator

Skapa CSS keyframe-animationer visuellt med live-foerhandsvisning.

Foerval

Varaktighet (s)

Tidsfunktion

Foerdroejning (s)

Upprepningar

Riktning

Fyllnadslaege

Live-foerhandsvisning

CSS-utdata

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.animated-element {
  animation: bounce 1s ease 0s infinite normal none;
}

Gratis CSS-animationsgenerator

Skapa CSS-animationer med realtidsfoerhandsvisning och kodexport.

Tips

Anvaend ease-in-out foer mjuka animationer
Haall animationer under 300ms
Anvaend transform och opacity foer prestanda
forwards behaaller slutstadiet
Anvaend animation-delay foer att sprida

FAQ

Vad aer CSS keyframe-animationer?

CSS keyframe-animationer definierar mellansteg med @keyframes-regler.

Vilka tidsfunktioner?

ease, linear, ease-in, ease-out, ease-in-out och cubic-bezier.

Hur upprepa?

Saett upprepningar till "infinite".

Vad aer fill-mode?

fill-mode bestammer hur stilar tillaempas foere och efter animationen.

Aer det gratis?

Ja, helt gratis.

Relaterade verktyg

CSS Gradient Generator Color Palette Generator CSS Grid Generator Box Shadow Generator

𝕏 Twitter in LinkedIn

💬 User Feedback

How to Use

Choose an animation type or customize keyframes
Adjust timing, duration, and easing
Preview the animation in real-time
Copy the generated CSS code

Common Use Cases

Creating hover effects
Building loading animations
Adding entrance/exit animations
Prototyping UI interactions

Frequently Asked Questions

What animation types are available?

Fade, slide, bounce, rotate, scale, flip, pulse, shake, and custom keyframe animations.

Can I customize the timing?

Yes. Adjust duration, delay, iteration count, direction, fill mode, and timing function (easing).

Will it work in all browsers?

Generated CSS includes vendor prefixes for maximum browser compatibility.