CSS Animation Generator
Build CSS keyframe animations with live preview.
Box
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease 0s 1 normal both;
}Acerca de esta herramienta
El Generador de Animaciones CSS permite crear animaciones suaves configurando presets de keyframes, temporización, duración, retraso e iteraciones. Una vista previa en vivo muestra la animación en acción.
Las animaciones CSS que usan transform y opacity son eficientes porque se componen en la GPU y no desencadenan layout ni repintado.
Cómo usar
- Selecciona un tipo de animación del menú desplegable.
- Establece la duración (p.ej., 0.5s, 2s).
- Elige una función de temporización para controlar el easing.
- Opcionalmente establece un retraso antes de que comience la animación.
- Establece el número de iteraciones (un número o infinite).
- Haz clic en Reproducir para previsualizar y Copiar para exportar el CSS.
Casos de uso
Los desarrolladores front-end usan animaciones de fade y slide para mejorar la percepción de rendimiento. Los diseñadores de UI prototipen micro-interacciones como pulsaciones de botones y sacudidas de notificaciones.
Preguntas frecuentes
- ¿Qué es fill-mode: both? — La animación aplica los estilos de inicio antes de comenzar y mantiene los estilos finales después de terminar. Es la configuración más útil.
- ¿Cómo hacer que una animación se repita forever? — Establece el número de iteraciones en infinite.
- ¿Las animaciones CSS son mejores que las de JavaScript? — Para efectos simples y declarativos, se prefieren las animaciones CSS. Para secuencias complejas o interactividad, JavaScript ofrece más control.