CSS Animasjonsgenerator

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

Forhåndsvalg

Varighet (s)

Tidsfunksjon

Forsinkelse (s)

Gjentakelser

Retning

Fyllmodus

Live forhåndsvisning

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

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.