DevToolBoxGRATIS
Blogg

CSS Animation Generator

Skapa CSS keyframe-animationer visuellt med live-foerhandsvisning.

1s
0s
A
@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

𝕏 Twitterin LinkedIn

💬 User Feedback

Have suggestions or found a bug? Leave a message and we'll get back to you.
0/2000

Betygsätt detta verktyg

4.8 / 5 · 79 betyg

More Tools

🌈Css Gradient Generator📦CSS Box Model Visualizer📐CSS Flexbox Generator

Recommended

Tailwind UIBeautiful UI components

Håll dig uppdaterad

Få veckovisa dev-tips och nya verktyg.

Ingen spam. Avsluta när som helst.

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

  1. Choose an animation type or customize keyframes
  2. Adjust timing, duration, and easing
  3. Preview the animation in real-time
  4. 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.