Generador de animación CSS de sprite sheet

Convierte un sprite sheet en una animación CSS con steps() lista para copiar y pegar, con vista previa en vivo, directamente en tu navegador.

Tu sprite sheet se lee localmente en tu navegador para construir la vista previa y generar el CSS; la imagen nunca se sube y se queda en tu dispositivo.

¿Ordenando la salida? Prueba el Formateador de CSS.

Acerca de Animación CSS de sprite sheet

Este generador de animación CSS de sprite sheet convierte una tira o cuadrícula de fotogramas en una animación CSS lista para pegar, construida sobre @keyframes y la función de temporizado steps(). Suelta una imagen de sprite sheet para obtener una vista previa en vivo, o simplemente escribe el ancho, el alto y el número de fotogramas y deja que la herramienta haga por ti los cálculos de background-position. Gestiona tanto una única fila horizontal como una cuadrícula completa, recorriendo los fotogramas por filas a través de las columnas y luego las filas, y empareja los keyframes con background-size para que cada celda encaje con exactitud. Define la velocidad por FPS o por duración total, nombra la animación, elige un bucle infinito o un número fijo de iteraciones, y escoge una dirección. Obtienes el CSS completo —el dimensionado del elemento, el bloque @keyframes y la abreviatura animation— que puedes copiar o descargar como un archivo .css. Todo se ejecuta en tu dispositivo, así que una hoja subida se lee localmente y nunca sale de tu navegador.

Características

Cómo usar Animación CSS de sprite sheet

  1. Sube un sprite sheet, o sáltate la subida e introduce solo las dimensiones de tus fotogramas.
  2. Elige fila única o cuadrícula, luego define el ancho, el alto y el número de fotogramas (más columnas y filas para una cuadrícula).
  3. Define la velocidad con FPS o una duración total, luego nombra la animación y elige la iteración y la dirección.
  4. Observa cómo se anima el elemento en la vista previa en vivo para confirmar que el encuadre es correcto.
  5. Copia el CSS generado o descárgalo como un archivo .css y colócalo en tu proyecto.

Ejemplo

Entrada

8 frames, 64×64 each, single row, 12 fps, infinite

Salida

.sprite {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  animation: sprite 0.667s steps(8) infinite normal;
}

@keyframes sprite {
  from { background-position: 0 0; }
  to { background-position: -512px 0; }
}

Una hoja de fila única solo necesita steps(8) y un keyframe de dos paradas para reproducir todos los fotogramas.

Errores comunes y solución de problemas

Preguntas frecuentes

¿Cómo anima steps() un sprite sheet?
steps(n) divide la animación en n tramos iguales y salta entre ellos en lugar de interpolar, así que background-position salta de un fotograma al siguiente. Usar steps() igual al número de fotogramas significa que cada fotograma se muestra durante un paso, sin posiciones intermedias borrosas.
¿Necesito subir mi imagen?
No. Subir un sprite sheet te da una vista previa en vivo, pero puedes generar CSS correcto solo con el ancho, el alto y el número de fotogramas. Sin una imagen, la vista previa muestra una cuadrícula de marcador de posición mientras los cálculos y la salida se mantienen exactos.
¿Cuál es la diferencia entre el modo de fila única y el de cuadrícula?
El modo de fila única asume que todos los fotogramas están en una tira horizontal y emite un keyframe compacto from/to. El modo de cuadrícula gestiona hojas de varias filas emitiendo una parada de background-position por fotograma, moviéndose a través de las columnas y luego bajando por las filas, y añade background-size para que toda la hoja se escale correctamente.
¿Debo definir FPS o una duración total?
Usa FPS cuando sepas cuántos fotogramas deben reproducirse por segundo; la herramienta lo convierte en una duración dividiendo el número de fotogramas entre los FPS. Usa la duración total cuando quieras que todo el bucle tarde un número concreto de milisegundos, sin importar el número de fotogramas.
¿Cómo hago que la animación se repita para siempre o solo unas pocas veces?
Elige Infinito para un bucle sin fin, que se mapea a animation-iteration-count: infinite. Elige Recuento e introduce un número para reproducir la secuencia un número fijo de veces, y usa la opción de dirección para una reproducción reverse o alternate.
¿Se sube mi sprite sheet a algún lugar?
No. La imagen se lee localmente con el FileReader de tu navegador para construir la vista previa y nunca sale de tu dispositivo; el CSS generado se calcula por completo en tu máquina.

Herramientas relacionadas

Todas las herramientas de ArrayKit