CSS-animatiegenerator
De CSS animation generator maakt @keyframes-animaties uit 14 presets zoals fade in, slide in, bounce in, pulse, spin, shake en zoom, met instellingen voor duur, timing function en aantal herhalingen.
Over deze tool
De CSS animation generator maakt @keyframes-animaties uit 14 presets zoals fade in, slide in, bounce in, pulse, spin, shake en zoom, met instellingen voor duur, timing function en aantal herhalingen.
Zo gebruik je het
- Kies een animatiepreset.
- Stel de duur, timing function en het aantal herhalingen in.
- Druk op Replay voor een preview.
- Klik op Copy CSS voor de @keyframes en de animation-regel.
Goed om te weten
- Een CSS-animatie bestaat uit twee delen: een @keyframes-regel en een animation-eigenschap op het element.
- transform en opacity animeren is meestal de soepelste keuze voor performance.
- Timing functions zoals ease-out beginnen snel en remmen af, wat natuurlijk aanvoelt bij binnenkomst-effecten.
- Respecteer de media query prefers-reduced-motion voor gebruikers die om minder beweging hebben gevraagd.
- Een oneindig aantal herhalingen past bij loaders; binnenkomst-effecten spelen meestal één keer af.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe maak ik een CSS-animatie?
Definieer de beweging in een @keyframes-regel en koppel die met animation: naam duur timing herhalingen. De generator schrijft beide voor je.
Wat is het verschil tussen CSS-transitions en -animaties?
Transitions animeren tussen twee toestanden als een eigenschap verandert, zoals bij hover. Animaties gebruiken keyframes, kunnen automatisch starten en kunnen herhalen.
Hoe laat ik een animatie eindeloos herhalen?
Zet het aantal herhalingen op infinite, bijvoorbeeld animation: spin 1s linear infinite.
Hebben CSS-animaties invloed op toegankelijkheid?
Grote of doorlopende beweging kan sommige gebruikers hinderen. Zet niet-essentiële animaties binnen @media (prefers-reduced-motion: no-preference).