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
¿Cómo la creo?
Añade paradas en la línea, pon transforms.
¿Qué es easing?
El ritmo del movimiento; personalízalo con cubic-bezier.
¿Hay previa?
Sí. Animación en vivo.
¿Es gratis?
Sí.
How to Use
01
Añade paradas
Keyframes en la línea.
02
Pon efectos
Mover, fundir, escalar.
03
Toma el código
Exporta el CSS.
How to Calculate
Las paradas forman el bloque @keyframes.
Sobre esta herramienta
Herramienta visual que da vida a las webs. Con transforms, opacidad y presets de easing. Animaciones suaves sin escribir código. Gratuita.
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.