Generador de Animación CSS
Crea animaciones CSS (@keyframes) intuitivamente.
Soporta 12 preajustes, ajuste de parámetros y vista previa.
Ajustes de Animación
Código CSS
Acerca del Generador de Animación CSS
Este "Generador de Animación CSS" es una herramienta gratuita que te permite previsualizar movimientos de animación usando @keyframes de CSS y generar automáticamente el código CSS necesario. Incluye 12 tipos de animaciones base (preajustes) como fade-in, slide, scale y bounce.
Puedes ajustar propiedades como Duración (segundos), Retraso, Easing, Repeticiones y Modo de Relleno usando controles y cajas de selección, comprobándolo en tiempo real en el área de vista previa.
Una vez ajustado, simplemente copia el código CSS generado y pégalo directamente en tu proyecto. Todo el procesamiento se realiza en tu navegador, sin comunicación con servidores externos, para mayor seguridad.
Pasos para Crear Animaciones CSS
Seleccionar Movimiento Base
Primero, cambia las pestañas como "Desvanecer" o "Deslizar" y selecciona un preajuste cercano a la animación que deseas crear.
Ajustar Parámetros
Cambia la duración, el retraso y el easing, y comprueba el movimiento en el área de vista previa a la derecha.
Copiar Código CSS
Una vez terminado, haz clic en el botón "Copiar Código" en el área de salida y pégalo en tu archivo CSS.
Glosario de Animación CSS (Guía de Propiedades)
animation-duration(Duration)- Especifica el tiempo de reproducción (para completarse) de una repetición de la animación. Se especifica en segundos (s) o milisegundos (ms).
animation-timing-function(Easing)- Especifica la curva de velocidad de la animación. Ejemplos incluyen "linear" para velocidad constante y "ease-in-out" para un inicio y fin suaves.
animation-delay(Delay)- Especifica el tiempo de espera (retraso) antes de que inicie la animación.
animation-iteration-count(Iterations)- Especifica el número de veces que se repite la animación. Especificar "infinite" la repite sin fin.
animation-direction(Direction)- Especifica la dirección de reproducción. Ejemplos incluyen "reverse" para retroceder, y "alternate" donde las impares avanzan y las pares retroceden.
animation-fill-mode(Fill Mode)- Especifica cómo se mantiene el estilo del elemento antes y después de la animación. Con "forwards" mantiene el estilo al finalizar la animación.
transition-property(Property)- transition を適用するプロパティ名 (例: transform, opacity, all)。
transition-duration(Duration)- transition が完了するまでの時間。
transition-timing-function(Easing)- transition の速度変化のカーブ (Easing)。
Preguntas Frecuentes (FAQ) sobre Animación CSS
- Q.¿Cuál es la diferencia entre animación CSS y transición?
transitioninterpola entre dos estados desencadenados por un cambio (ej. hover).animationse reproduce automáticamente sin activador y permite definir pasos intermedios detallados con @keyframes.- Q.¿Qué animaciones tienen mejor rendimiento?
- Las animaciones con
transform(translate, scale, rotate) yopacityson rápidas por la aceleración por hardware. Animaciones enwidth,heightomargincausan reflujo del navegador y son más lentas. - Q.¿Qué es prefers-reduced-motion?
- Es una consulta de medios (media query) para usuarios que sufren mareos por animaciones. Se recomienda usar
@media (prefers-reduced-motion: reduce)para desactivarlas o reducirlas por accesibilidad. - Q.¿Es obligatorio usar animation-fill-mode forwards?
- Para animaciones como fade-in, si no especificas
forwards, el elemento volverá a su estado original (ej. opacity: 0) al final. Es obligatorio si quieres mantener el estilo del cuadro final en la pantalla. - Q.¿Se envían mis datos a un servidor?
- No. Todo el procesamiento se realiza localmente en tu navegador y no se envía ningún dato externamente.
Casos de Uso de Animaciones CSS
Animaciones de Carga de Página
Implementa un desvanecimiento suave o un deslizamiento desde abajo para mejorar la primera impresión de la página.
Destacar Botones y CTAs
Aplica animaciones como pulse (latido) o bounce (rebote) a los botones para guiar la atención del usuario de forma natural.
Animaciones al Desplazar
Combina la API Intersection Observer con las clases CSS generadas para crear efectos que se reproducen al entrar en la pantalla.
Interfaces de Espera (Loading)
Implementa animaciones que rotan o parpadean continuamente como respuesta al obtener datos o enviar formularios.
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.