DevToolBoxGRATIS
Blogg

CSS Animasjonsgenerator

Lag CSS keyframe-animasjoner visuelt med live forhåndsvisning.

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-animasjonsgenerator

Lag CSS-animasjoner med sanntidsforhåndsvisning og kodeeksport.

Tips

  • Bruk ease-in-out for myke animasjoner
  • Hold animasjoner under 300ms
  • Bruk transform og opacity for ytelse
  • forwards beholder slutttilstanden
  • Bruk animation-delay for å spre

FAQ

Hva er CSS keyframe-animasjoner?
CSS keyframe-animasjoner definerer mellomtrinn med @keyframes-regler.
Hvilke tidsfunksjoner?
ease, linear, ease-in, ease-out, ease-in-out og cubic-bezier.
Hvordan gjenta?
Sett gjentakelser til "infinite".
Hva er fill-mode?
fill-mode bestemmer hvordan stiler brukes foer og etter animasjonen.
Er det gratis?
Ja, helt gratis.

Relaterte verktoy

𝕏 Twitterin LinkedIn

💬 User Feedback

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

Vurder dette verktøyet

4.8 / 5 · 79 vurderinger

More Tools

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

Recommended

Tailwind UIBeautiful UI components

Hold deg oppdatert

Få ukentlige dev-tips og nye verktøy.

Ingen spam. Avslutt 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.