AkousaGenerador de animaciones CSS
Crea animaciones CSS visualmente con vista previa en vivo, efectos predefinidos, controles de temporización y código instantáneo.
Se usa como nombre de @keyframes e identificador de la propiedad animation.
animate-in fade-inRequiere Tailwind CSS v3+ con plugin de animación o tailwindcss-animate.
@keyframes myAnimation {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element {
animation: myAnimation 1s ease 0s infinite normal both;
}
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
}
}Acerca del generador de animaciones CSS
Un generador de animaciones CSS te permite crear y personalizar animaciones @keyframes sin escribir código desde cero. Elige entre efectos predefinidos, ajusta la configuración, previsualiza en tiempo real y copia el CSS generado.
Cómo usar
Selecciona una animación predefinida o escribe keyframes personalizados. Ajusta la duración, el retraso, la función de temporización y el número de repeticiones. Observa cómo la vista previa se actualiza al instante. Haz clic en Copiar CSS para obtener el código completo.
Casos de uso comunes
- Crear animaciones de entrada y salida para componentes de interfaz
- Crear indicadores de carga y efectos de atención
- Agregar microinteracciones a botones, tarjetas y notificaciones
- Aprender sintaxis de animaciones CSS con retroalimentación visual
- Prototipar rápidamente ideas de animación para presentaciones a clientes