Developer
CSS ANIMATION
Create, preview, and export CSS @keyframes animations with a visual timeline editor. Add keyframe stops, set transforms, opacity, colors, and easing curves. Copy ready-to-use CSS code.
Private by design
No signup · Free
Keyframes Timeline
Properties (0%)
Timing & Easing
Preview Content
Presets
Animation Library
No saved animations yet
Share & Export
Live Preview
0.0s / 1.5s
0%
Background
CSS Output
/* Adjust controls to generate CSS */
Frequently Asked Questions
Comment la créer ?
Ajoutez des arrêts sur la ligne, mettez des transforms.
C'est quoi easing ?
Le rythme du mouvement ; perso via cubic-bezier.
Un aperçu ?
Oui. Animation en live.
Gratuit ?
Oui.
How to Use
01
Ajoutez des arrêts
Keyframes sur la ligne.
02
Mettez des effets
Bouger, fondre, zoomer.
03
Prenez le code
Exportez le CSS.
How to Calculate
Les arrêts forment le bloc @keyframes.
À propos de cet outil
Outil visuel qui anime les sites. Avec transforms, opacité et presets d'easing. Des animations douces sans écrire de code. Gratuit.
Related Tools
Methodology & feedback
Figures run locally in your browser from the values you enter (page updated ). Estimates are educational only — verify finance, tax and health decisions with a qualified professional (see Disclaimer). Spotted an error? Report it via contact and we correct with a new update date.
Was this tool helpful?
Thanks — feedback recorded anonymously.