Skip to content

Kleur & Ontwerp

CSS Animatie Generator

Build keyframes visually, copy ready-to-paste CSS.

Runs in your browser

Redactionele opmerking

Understanding · Keyframes, timing, and what runs on the GPU.

Dit uitgebreide hoofdstuk is momenteel alleen in het Engels beschikbaar. De conversietool hierboven werkt in jouw taal; de lange uitleg is nog niet vertaald.

Veelgestelde vragen

Quick answers.

Does the generator use external libraries?

No. It outputs pure CSS keyframes and `animation` properties that work natively in all modern browsers without any dependencies.

What is the difference between ease-in and ease-out?

The `ease-in` function starts the animation slowly and speeds up at the end, while `ease-out` starts quickly and decelerates at the end.

Can I animate any CSS property?

The tool focuses on the most common animatable properties like `transform`, `opacity`, and `background-color`. These properties are generally more performant as they avoid triggering browser layout recalculations.

How do I make an animation loop forever?

Set the `animation-iteration-count` property to `infinite`. This is a standard option in the duration and timing configuration panel.

Mensen zoeken ook naar

Gerelateerde tools

More in this room.

Bekijk alles in Kleur & Ontwerp