Herramientas CSS/Constructor de Animaciones CSS
Constructor de Animaciones CSS
Crea impresionantes animaciones CSS de keyframes con editor de línea de tiempo interactivo
Vista Previa
Box
Configuración
1s
0s
Presets
Línea de Tiempo
Keyframe en 0%
Keyframe en 50%
Keyframe en 100%
Código CSS
Loading...Guía del Generador de Animaciones
Crea animaciones CSS cautivadoras con keyframes
¿Qué es Animación CSS?
Las animaciones CSS permiten transiciones suaves entre estilos a lo largo del tiempo. Con keyframes, puedes crear secuencias complejas controlando propiedades como posición, tamaño y color.
Cómo Usar
- Define keyframes con estilos de inicio y fin
- Configura duración y función de temporización
- Configura conteo de repeticiones y dirección
- Previsualiza y copia el código CSS
Consejos Pro
- Usa ease-in-out para movimiento natural
- Prueba animaciones con diferentes velocidades
- Combina transform y opacity para mejor rendimiento
Soporte del Navegador
Las animaciones CSS son ampliamente compatibles en todos los navegadores modernos.
Preguntas frecuentes
¿Cuál es la diferencia entre animation y transition?
Transition responde a cambios de estado (ej. hover) animando entre dos estados. Animation puede ejecutarse automáticamente, repetirse, tener múltiples pasos intermedios (keyframes) y crear secuencias complejas. Transition es simple y fácil, animation ofrece más flexibilidad.
¿Qué hace animation-fill-mode?
animation-fill-mode especifica los estilos aplicados antes/después de la animación. forwards mantiene el estado final, backwards aplica el estado inicial durante el retardo, both combina ambos. Sin especificar, el elemento vuelve a su estado original después de la animación.
¿Cómo creo una animación infinita?
Establece animation-iteration-count: infinite; para que la animación se repita indefinidamente. Para un loop suave, usa animation-direction: alternate para que la animación se reproduzca hacia adelante y atrás, evitando saltos al final.
¿Puedo pausar y reanudar animaciones CSS?
Sí, usa la propiedad animation-play-state. paused pausa la animación, running la reanuda. Puedes controlar esto con JavaScript o estados CSS como :hover. Por ejemplo: .elemento:hover { animation-play-state: paused; }
¿Qué propiedades son eficientes para animar?
transform y opacity son las propiedades más eficientes, procesadas por la GPU. Animar width, height, top, left dispara re-layouts costosos. Para mejor rendimiento, usa transform: translate() en lugar de posición y transform: scale() en lugar de dimensiones.