⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Generador de animaciones CSS con fotogramas clave

Construye animaciones @keyframes reales en una línea de tiempo multipista — con paradas de transformación, opacidad y color de fondo por pista — y un cabezal de reproducción arrastrable que muestra el estado interpolado exacto de la animación en cualquier punto.

🔒 Procesado íntegramente en su navegador: nada de lo que ingresa aquí se carga nunca.

Haz clic en cualquier lugar de un carril para añadir una parada. Arrastra una parada para moverla, o edita su porcentaje y sus campos de valor debajo del carril. Haz doble clic en una parada para eliminarla (mínimo 2 por pista).

Procesando... 0%

Resultado

Una regla @keyframes de CSS es en realidad una pequeña línea de tiempo: un conjunto de puntos de control porcentuales, cada uno de los cuales declara cómo debería verse una propiedad en ese instante exacto, y el navegador interpola todo lo que hay entre ellos. Crear una a mano significa mantener varios de estos puntos de control en la cabeza a la vez para varias propiedades; este generador convierte esa línea de tiempo en algo que realmente puedes ver y arrastrar: un carril horizontal por propiedad, con un marcador de parada en cada punto de control.

La pieza central es el cabezal de avance. Arrástralo a cualquier punto entre el 0 % y el 100 % y la caja de vista previa saltará al estado combinado exacto en ese instante — no al fotograma clave más cercano, sino a un valor real interpolado linealmente calculado entre las dos paradas que rodean al cabezal en cada pista activa. Las propiedades numéricas como posición, rotación y escala se interpolan como números normales; el color de fondo interpola cada canal rojo, verde y azul de forma independiente, que es lo que hace que una pista de color se difumine suavemente a través de tonos intermedios en lugar de saltar entre los colores que realmente has establecido.

Múltiples pistas se combinan automáticamente en una animación coherente: cada propiedad basada en transformación (mover, rotar, escalar) se fusiona en una sola declaración transform en cada fotograma clave porcentual, mientras que la opacidad y el color de fondo permanecen en sus propias líneas, exactamente como se vería el CSS escrito a mano real. Los porcentajes en los que una pista no tiene una parada explícita simplemente se omiten a propósito de las declaraciones de esa propiedad; la propia interpolación de fotogramas clave del navegador llena el hueco entre las paradas que sí existen, de la misma manera que lo haría con cualquier regla @keyframes que escribieras a mano.

Cinco ajustes predefinidos — rebote, sacudida, pulso, fundido de entrada y deslizamiento de entrada — cargan una línea de tiempo completa y lista para modificar (incluyendo una duración, función de temporización y número de repeticiones sensatos) con un solo clic. Pulsa Reproducir en cualquier momento para ver la animación CSS real ejecutándose en el elemento de vista previa, generada sobre la marcha mediante una hoja de estilo inyectada dinámicamente, y luego copia el bloque @keyframes completo más la notación abreviada .elemento-animado { animation: ... } directamente en tu propio proyecto. Como todas las herramientas de este sitio, todo se ejecuta localmente en el navegador y nunca se sube nada.

¿Te gusta esta herramienta? ¿Crees que este producto es útil? ¿Ves potencial en él y quieres apoyarlo?

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se ejecuta completamente sin conexión. 100% seguro.

Formatos aceptados y reglas

  • Línea de tiempo multipista para transformación (translateX, translateY, rotate, scale), opacidad y color de fondo, cada una con sus propias paradas arrastrables.
  • Interpolación lineal real — numérica para propiedades numéricas y por canal RGB para colores — que controla la vista previa de arrastre entre dos paradas cualesquiera de una pista.
  • Un botón Reproducir aplica el CSS de @keyframes generado a la vista previa mediante una hoja de estilo inyectada dinámicamente, además de proporcionar una salida copiable con el bloque @keyframes completo y la notación abreviada de animation.

Beneficios clave

✓ El cabezal de reproducción arrastrable muestra el estado interpolado real de la animación en cualquier punto — no un salto entre fotogramas clave —, exactamente como lo renderizará el navegador.
✓ Cada propiedad tiene su propia pista con sus propias paradas, de modo que un rebote, un cambio de color y un fundido pueden ejecutarse a la vez en el mismo elemento sin interferir entre sí.
✓ Cinco ajustes predefinidos (rebote, sacudida, pulso, fundido de entrada, deslizamiento de entrada) proporcionan un punto de partida funcional con un solo clic, y a partir de ahí cada parada se puede editar por completo.

Casos de uso

  • • Arrastre el cabezal de reproducción a cualquier punto de una animación de rebote o pulso para ver el estado interpolado exacto en mitad de la animación antes de enviar el CSS.
  • • Combine una pista translateX con una pista de opacidad para crear una animación de entrada real con deslizamiento y fundido, y luego copie los @keyframes completos con el shorthand de animation.
  • • Añada una pista de background-color junto a una pista de escala para animar el color y el tamaño de un botón a la vez, viendo cómo se mezclan los canales RGB en directo mientras arrastra el cursor.