Wat is CSS Animation Keyframes Generator?
De CSS Animation Keyframes Generator maakt volledige CSS @keyframes-regels en animation shorthand-eigenschappen uit vooraf ingestelde bewegingspatronen.
Snel antwoord
Kies uit negen animatievoorinstellingen en pas duur, easing, vertraging, iteratie, richting en vulmodus aan. Ontvang een volledige @keyframes-regel plus animation shorthand CSS.
Last updated: 2026-06-11
Beperkingen
- De @keyframes-regel gebruikt from/to-syntax. Aangepaste percentages moeten handmatig worden toegevoegd.
- De tool genereert één animatie tegelijk.
- Live voorbeeld gebruikt een statisch element.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Selecteer een animatievoorinstelling: Fade In/Out, Slide Down/Up, Scale In, Spin, Pulse, Bounce of Shake.
- Pas de parameters aan: duur, easing, vertraging, iteraties, richting en vulmodus.
- Bewerk de animatienaam indien nodig.
- Bekijk het live voorbeeld. Klik op Replay om te herhalen.
- Kopieer de volledige uitvoer naar uw stylesheet.
Waarvoor je het kunt gebruiken
- Genereer een fade-in-animatie voor een modaal venster met fadeIn en ease-out.
- Maak een continue draai-animatie voor een laadspinner met Spin en lineaire easing.
- Bouw een pulse-animatie voor een call-to-action knop.