6XC

CSS Animatie Generator

Kies een keyframe-preset — draaien, pulseren, stuiteren, schudden, vervagen, schuiven — pas duur en herhalingen aan, kopieer @keyframes + klasse.

632 weergaven

CSS-animaties

Een animatie combineert een @keyframes-blok (wat verandert) met de animation-eigenschap (hoe het afspeelt: duur, timing, aantal herhalingen). In tegenstelling tot transitions lopen ze zelfstandig, zonder hover of klassewissel nodig te hebben. Deze generator biedt zes kant-en-klare presets en levert zowel de keyframes als een bruikbare klasse.

Veelgestelde vragen

Animatie of transitie — wat kies je?

Transitie reageert op een statusverandering (hover, klasse). Animatie loopt zelfstandig, kan oneindig herhalen en meerdere stappen definiëren — gebruik het voor spinners, aandachtspulsen en intro-effecten.

Hoe houd ik rekening met gebruikers die minder beweging willen?

Plaats de animatie binnen @media (prefers-reduced-motion: no-preference) { … } of schakel deze uit in de reduce-variant — gebruikers met vestibulaire gevoeligheid zullen u dankbaar zijn.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren