Generador de Animaciones CSS

Generador de Animaciones CSS — Construye @keyframes con Vista Previa en Vivo

Un editor visual para CSS @keyframes que se ejecuta enteramente en tu navegador. Elige un preset para cargar una animación terminada, luego ajusta duración, easing, iteraciones, dirección y los stops individuales (translateX, translateY, scale, rotate, opacity, color de fondo). La vista previa se re-renderiza con cada cambio y la salida CSS se regenera como código canónico listo para copiar, con un bloque @keyframes nuevo y una línea de shorthand animation.

¿Qué genera exactamente esta herramienta?

Dos bloques de CSS puro:

1. Un bloque `@keyframes <nombre>` con cada stop que definiste (0%, 100%, más cualquier stop extra añadido). Cada stop emite solo las propiedades que difieren del valor por defecto — si nunca cambias el color de fondo, no aparece línea `background-color`. Si `translate(x, y)` es cero sin scale ni rotate, no se escribe `transform`. Esto mantiene la salida mínima y legible.

2. Un shorthand de animación: `animation: <nombre> <duración>s <timing-function> <retardo>s <iterations> <dirección> <fill-mode>;` — exactamente el orden que los navegadores esperan, así puedes pegarlo encima de cualquier selector.

Aplícalo a cualquier elemento añadiendo el shorthand al selector de ese elemento y asegurando que el bloque `@keyframes` esté en alcance (mismo stylesheet o stylesheet padre).

¿Cómo se mantiene la vista previa en vivo sincronizada con la salida CSS?

Cada cambio — un slider, un select, un input en la tabla de keyframes — dispara tres cosas en secuencia:

1. El objeto state se actualiza (nombre, duración, keyframes, etc.).
2. El texto CSS se reconstruye y muestra en el panel de salida con resaltado de sintaxis.
3. Un elemento `<style>` scoped con un sufijo `__preview` en el nombre de la animación se inyecta (o reemplaza) en el head de la página, luego la clase de la caja se quita y vuelve a añadir en el siguiente frame de animación para forzar un reinicio.

El sufijo `__preview` previene colisiones de nombre con una copia del mismo CSS ya en la página, y el truco del reflow (`void box.offsetWidth`) es lo que hace que 'Reproducir' funcione incluso cuando la animación ha terminado. No hay JavaScript impulsando el movimiento — el compositor del navegador maneja cada frame, por eso la vista previa es fluida incluso en dispositivos modestos.

¿Qué presets se incluyen y por dónde empezar?

Once presets cubren los patrones más comunes:

- **fade-in / zoom-in / zoom-out** — animaciones de entrada y salida usando opacity y scale.
- **slide-in-left / slide-in-right** — translate desde fuera de pantalla a posición, ease-out para deceleración natural.
- **bounce** — translate vertical con tres picos, ease-in-out, infinito.
- **pulse** — scale a 1.05 y vuelta, infinito, útil para botones de 'atención'.
- **shake** — oscilación horizontal corta para estados de error.
- **rotate-360** — una revolución completa, easing lineal, infinito — para spinners.
- **flip** — efecto de volteo con rotateY simulado por un scale rápido en X y vuelta.
- **color-cycle** — anima background-color a través de stops de matiz.

Si no sabes por dónde empezar, elige el más cercano a tu intención y luego ajusta duración y easing. La mayoría de animaciones de producción son 200–400ms (para interacciones UI), 800–1500ms (para entradas hero), o infinitas (para loaders).

¿Qué controla realmente la función de tiempo?

La función de tiempo es la curva de easing — mapea el tiempo de animación (0 a 1) a un valor de progreso, que determina cómo se mueve la caja entre dos keyframes cualesquiera.

Los presets cubren cuatro familias:

- **linear** — velocidad constante. Mejor para spinners, cualquier cosa que deba sentirse mecánica.
- **ease / ease-in / ease-out / ease-in-out** — curvas cubic bézier incorporadas. Mejor para movimiento UI; `ease-out` es la más común porque se siente natural (inicio rápido, parada suave).
- **cubic-bezier(0.34, 1.56, 0.64, 1)** — overshoot. La coordenada y de P2 es mayor que 1, así que la animación pasa el objetivo y se asienta. Ideal para entradas juguetonas.
- **steps(N, end)** — salta en N pasos discretos. Mejor para animaciones de sprite-sheet o efectos de máquina de escribir donde no quieres interpolación suave.

La función de tiempo aplica entre cada par de keyframes a menos que la sobrescribas por stop en CSS raw (esta herramienta usa una curva para toda la animación, lo que cubre 95% del uso real).

¿Cómo se usan los porcentajes de keyframe y cuál es el mínimo?

Un bloque `@keyframes` necesita al menos dos stops — usualmente `0%` y `100%` — para describir un estado inicial y final. Puedes añadir más stops para definir poses intermedias; el navegador interpola entre stops consecutivos usando la función de tiempo.

Por ejemplo, un bounce que eleva la caja a mitad de camino usa:

```
0% { transform: translateY(0); }
50% { transform: translateY(-40px); }
100% { transform: translateY(0); }
```

La tabla en esta herramienta mantiene los stops ordenados por porcentaje, y rechaza eliminar si solo quedan dos (el mínimo). Dos alias convenientes que CSS también acepta — `from` y `to` — mapean a `0%` y `100%` respectivamente, pero esta herramienta siempre escribe la forma numérica por consistencia.

Si quieres que una propiedad 'salte' en lugar de interpolar, coloca dos stops adyacentes a un porcentaje de distancia (ej. `49% { x: 0 } 50% { x: 100 }`).

¿Cuál es la diferencia entre iteration count, direction y fill mode?

Estas tres propiedades controlan cómo se comporta la animación en el tiempo:

- **iteration-count** — cuántas veces reproducir. `1` (por defecto) reproduce una vez y para en el estado sin animar; `infinite` repite para siempre; cualquier número positivo (incluso fracciones como `2.5`) reproduce ese número de veces.
- **direction** — `normal` reproduce 0%→100% cada vez; `reverse` reproduce 100%→0%; `alternate` intercambia cada iteración (0→100, luego 100→0, luego 0→100…); `alternate-reverse` es alternate empezando al revés.
- **fill-mode** — qué mostrar cuando la animación no está corriendo. `none` (por defecto) vuelve al estado sin animar al terminar (y muestra el estado sin animar durante el `delay`). `forwards` mantiene el último keyframe aplicado después de que termine. `backwards` aplica el primer keyframe durante el delay. `both` hace ambas.

Un patrón común 'fade-in y permanecer' usa `iteration-count: 1`, `direction: normal`, y `fill-mode: forwards` para que la caja permanezca visible tras desvanecerse hacia dentro.

¿Cómo uso el CSS generado en mi proyecto?

Tres pasos:

1. Pulsa **Copiar** para obtener el bloque `@keyframes` y el shorthand `animation: …`.
2. Pégalos en tu stylesheet. El bloque `@keyframes` puede vivir donde sea en tu CSS — arriba, abajo, en una etiqueta `<style>`, en un archivo `.css` enlazado desde tu HTML. Mantenlos juntos para claridad.
3. El shorthand está aplicado a `.element` por defecto — cámbialo por tu selector (ej. `.modal`, `#hero-image`, `.btn-attention`). Si quieres en hover, scopea el shorthand a `:hover`. Si quieres condicionalmente, añade o quita la clase con JavaScript.

Si necesitas la animación en múltiples componentes con duraciones diferentes, define `@keyframes` una vez y escribe múltiples líneas `animation:` con el mismo nombre pero duraciones distintas.

Para producción también puedes usar la forma longhand (`animation-name`, `animation-duration`, etc.) si necesitas sobrescribir solo una propiedad en una media query — pero el shorthand es más compacto para la declaración inicial.

¿Es privada esta herramienta? ¿Envía mi animación a algún lado?

Sí, totalmente privada. Todo corre en tu navegador:

- La vista previa es un bloque `<style>` inyectado en la misma página — sin grabación de canvas, sin viaje al servidor, sin telemetría.
- La salida CSS la generan template strings en JavaScript; nada se envía a un servidor cuando cambias un slider o eliges un preset.
- El botón Copiar usa directamente el API del portapapeles del navegador.
- No se carga ninguna biblioteca de animación externa (sin GSAP, sin anime.js, sin Framer Motion) — la salida es CSS puro que los navegadores soportan desde IE10.

Puedes verificar abriendo DevTools → Red y observando el panel mientras ajustas la animación — no debería dispararse ninguna petición. Esto también significa que la herramienta funciona offline una vez cargada la página, y cualquier `nombre` que elijas para tu animación se queda en tu navegador.

Características Principales

• 11 animaciones preset: fade-in, slide-in-left/right, bounce, pulse, shake, rotate-360, zoom-in/out, flip, color-cycle
• Tabla de keyframes editable con translateX, translateY, scale, rotate, opacity, color de fondo
• Vista previa en vivo re-renderiza con cada cambio; controles de pausa/reproducir
• 9 funciones de tiempo incluyendo cubic-bezier (overshoot) y steps()
• Dirección (normal/reverse/alternate/alternate-reverse) y fill-mode (none/forwards/backwards/both)
• Iteraciones: 1, 2, 3, infinite, o cualquier número positivo
• Añade keyframes intermedios en el punto medio, auto-ordena por porcentaje
• Mínimo dos stops obligatorios; botón eliminar desactivado en el mínimo
• Genera bloque @keyframes canónico y shorthand animation
• Salida CSS con sintaxis resaltada para modo claro/oscuro
• Copia al portapapeles con un clic
• Sin bibliotecas de animación externas — CSS puro, nativo del navegador
• Funciona offline tras la primera carga
• Diseño responsive amigable para móvil
• 100% del lado del cliente — nada se envía a un servidor