6XC

Generador de Animaciones CSS

Elige un preajuste de keyframes — giro, pulso, rebote, sacudida, desvanecimiento, deslizamiento — ajusta la duración y las repeticiones, copia @keyframes + la clase.

639 visitas

Animaciones CSS

Una animación combina un bloque @keyframes (qué cambia) con la propiedad animation (cómo se reproduce: duración, curva de tiempo, número de repeticiones). A diferencia de las transiciones, se ejecutan por sí solas, sin necesidad de hover ni de cambiar de clase. Este generador incluye seis preajustes listos para usar y genera tanto los keyframes como una clase lista para usar.

Preguntas Frecuentes

¿Animación o transición — cuál elegir?

La transición reacciona a un cambio de estado (hover, clase). La animación se ejecuta por sí sola, puede repetirse infinitamente y definir muchos pasos — úsala para spinners, pulsos de atención y efectos de entrada.

¿Cómo respeto a los usuarios que prefieren menos movimiento?

Envuelve la animación en @media (prefers-reduced-motion: no-preference) { … } o desactívala en la variante reducida — los usuarios sensibles a trastornos vestibulares te lo agradecerán.

Herramientas Similares

Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generar Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar