Generador de Animaciones Sprite CSS
Genera automáticamente código de animación CSS
a partir de varias imágenes o una hoja de sprites
📏 Configuración de cuadrícula
⚙️ Configuración de animación
🎞️ Orden de fotogramas
Arrastre para reordenarTambién te puede interesar
Acerca del Generador de Animaciones Sprite
El Generador de Animaciones Sprite CSS es una herramienta en línea gratuita que genera automáticamente código CSS para animaciones utilizando la propiedad animation y la función steps(), a partir de múltiples imágenes de fotogramas o una hoja de sprites existente.
A diferencia de las animaciones GIF, los sprites CSS ofrecen alta calidad de imagen sin degradación. Le permiten controlar de manera flexible la velocidad de reproducción, la dirección y la iteración directamente a través de CSS. Además, conservan maravillosamente las áreas semitransparentes (canal alfa).
Todo, desde la carga y fusión de imágenes hasta la generación del código CSS, se procesa íntegramente en su navegador. Sus imágenes nunca se suben a un servidor, lo que garantiza una experiencia rápida y segura.
Cómo crear animaciones sprite CSS
Cargar Imágenes
Seleccione una hoja de sprites ya combinada o suba múltiples imágenes para combinarlas en una sola hoja.
Ajustar Animación
Mientras revisa la vista previa, configure el número de columnas y filas, la velocidad y la dirección de reproducción.
Obtener Código e Imagen
Descargue la imagen de la hoja generada y copie el código CSS/HTML automático en su proyecto.
Propiedades CSS Explicadas
Cómo funciona CSS animation + steps()
La función steps() es un valor utilizado en la propiedad CSS animation-timing-function. Mientras que las animaciones normales (como ease o linear) interpolan suavemente los valores a lo largo del tiempo, steps() altera el valor en incrementos discretos y escalonados.
En la animación de sprites, esta propiedad se utiliza para desplazar instantáneamente la propiedad background-position por el ancho de un solo fotograma, creando un efecto cuadro por cuadro.
| Propiedad | Descripción | Función en Sprites |
|---|---|---|
| animation-timing-function | La curva de ritmo de la animación | Configurar steps(N) evita las transiciones suaves. |
| background-position | La posición inicial de una imagen de fondo | Se modifica dentro de @keyframes para mostrar los fotogramas. |
| animation-duration | El tiempo que tarda en completarse un ciclo | Determina la velocidad general de reproducción (FPS). |
Glosario de animación
- Hoja de Sprites (Sprite Sheet)
- Una sola imagen grande que contiene múltiples imágenes más pequeñas (fotogramas) dispuestas en una cuadrícula. Reduce la cantidad de solicitudes HTTP y mejora los tiempos de carga.
- Función steps()
- Una función de aceleración de CSS que cambia los valores en pasos discretos en lugar de hacerlo de manera fluida. Por ejemplo,
steps(4)divide la transición en 4 saltos distintos. - @keyframes
- Una regla CSS que se utiliza para definir los estados intermedios durante una animación. En los sprites, especifica un cambio en
background-positionde 0% a 100%. - background-position
- Propiedad CSS que especifica la posición inicial de una imagen de fondo. Al desplazar negativamente este valor, los diferentes fotogramas de la hoja entran en la vista del elemento.
- Canal Alfa (Alpha Channel)
- La porción de los datos de la imagen que dicta la transparencia. El uso de PNG permite hermosos degradados semitransparentes, a diferencia de los GIF que solo admiten transparencia de 1 bit.
Preguntas frecuentes
- P.¿Mis imágenes cargadas se guardan en un servidor?
- No, no lo hacen. Esta herramienta procesa todas las imágenes completamente dentro del entorno local de su navegador. No se envía información a servidores externos, por lo que es seguro para imágenes confidenciales.
- P.¿Cuál es la diferencia entre las animaciones GIF y las de sprite CSS?
- Si bien los GIF son archivos independientes simples, están limitados a 256 colores y carecen de una verdadera semitransparencia. Los sprites CSS utilizan PNG para obtener imágenes de alta calidad y ofrecen un control flexible a través de CSS.
- P.¿Puedo fusionar imágenes de diferentes tamaños?
- Debido a la mecánica de los sprites CSS, todos los fotogramas deben tener dimensiones uniformes. Si sube imágenes de diferentes tamaños, la herramienta las alineará según el tamaño de la primera, lo que puede causar recortes inesperados.
- P.¿Cómo soluciono las imágenes borrosas en las pantallas Retina?
- Para garantizar imágenes nítidas en pantallas de alta resolución, cree su hoja de sprites con el doble de la resolución de visualización deseada y use
background-sizepara reducir su escala al tamaño real. - P.¿Hay un tamaño máximo recomendado para la hoja de sprites?
- En general, es mejor mantener las dimensiones máximas por debajo de 2048x2048 píxeles para evitar consumir demasiada memoria en dispositivos móviles, lo que puede causar animaciones entrecortadas o bloqueos del navegador.
Casos de uso
Animaciones de carga
Ideales para crear indicadores de carga personalizados o barras de progreso. Se ejecutan eficientemente con una mínima sobrecarga de CSS y admiten hermosos diseños semitransparentes.
Movimiento de personajes
Cree bucles de acción como "caminar", "correr" o "saltar" para personajes en juegos de navegador. Cambiar de acción es tan fácil como cambiar una clase CSS.
Iconos de UI interactivos
Perfecto para cambios de iconos dinámicos cuando un usuario pasa el ratón sobre un botón. Active estas animaciones sin problemas utilizando :hover o clases.
Anuncios publicitarios de alta calidad
Eficaces para banners que requieren un movimiento atractivo sin la degradación de los GIF. Combinado con la compresión PNG, ofrece banners de animación llamativos.
Enviar comentarios
Déjenos saber su opinión para ayudarnos a mejorar la herramienta.
Los comentarios están temporalmente suspendidos
El servidor está ocupado o la protección contra spam está activa. Inténtelo más tarde.