Generador de animaciones CSS
Cree animaciones CSS de fotogramas clave con un editor visual de línea de tiempo
Ajustes de animación
Animaciones predefinidas
Fotogramas clave
0% → 100%
Fotograma clave · 0%
Fotograma clave · 100%
Vista previa en tiempo real
CSS generado
@keyframes myAnimation {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-delay: 0s;
}Edite los fotogramas clave y vuelva a reproducir para comprobar su animación.
Ejemplos rápidos de transformaciones
translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)Ejemplo: skewX(10deg) / skewY(-5deg)Ejemplo: perspective(400px) rotateY(180deg)Acerca del generador de animaciones CSS
Nuestro generador de animaciones CSS gratis le permite crear animaciones keyframe profesionales de forma visual, sin escribir código complejo desde cero. Configure cada aspecto de su animación, desde la duración y las funciones de temporización hasta las propiedades de cada fotograma clave, y vea los resultados al instante con una vista previa en vivo que se actualiza en tiempo real.
Ya sea que necesite un sutil efecto de aparición gradual, un rebote llamativo o una animación personalizada de varios pasos, esta herramienta ofrece 10 plantillas integradas y un editor completo de fotogramas clave. Cada plantilla es totalmente personalizable, así que puede usarla como punto de partida y ajustar cada propiedad, incluidas transform, opacity y el color de fondo, en cualquier punto porcentual.
El generador produce código CSS listo para producción y limpio, con la sintaxis @keyframes correcta y propiedades de animación individuales. Basta con copiar el código generado y pegarlo en su hoja de estilos. Todo el procesamiento ocurre en su navegador, sin subidas a ningún servidor, para que su trabajo se mantenga privado y seguro.
Características principales
- Editor visual de fotogramas clave con controles de transform, opacity y background-color por fotograma
- 10 plantillas de animación listas para usar: Rebote, Aparecer, Desvanecer, Entrada desde la izquierda, Entrada desde la derecha, Giro, Pulso, Sacudida, Volteo y Zoom de entrada
- Panel de vista previa en vivo con repetición instantánea para probar las animaciones
- Controles completos de las propiedades de animación: duración, función de temporización, número de iteraciones, dirección, modo de relleno y retraso
- Compatibilidad con funciones de temporización cubic-bezier personalizadas para curvas de aceleración precisas
- Agregue y elimine fotogramas clave en cualquier punto porcentual (0%, 25%, 50%, 75%, 100% o personalizado)
- Salida CSS limpia con @keyframes y propiedades de animación individuales, lista para producción
- Copia al portapapeles con un clic para integrar el código al instante en sus proyectos
- Nombres de animación personalizados para un código organizado y semántico
- Compatibilidad total con modo oscuro para editar cómodamente en cualquier entorno
Cómo usar el generador de animaciones CSS
- Elija un punto de partida: Seleccione una de las 10 plantillas integradas, como Rebote, Aparecer o Giro, o empiece con una animación en blanco.
- Ajuste las propiedades de la animación: Defina la duración, la función de temporización, el número de iteraciones, la dirección, el modo de relleno y el retraso con los controles intuitivos.
- Edite los fotogramas clave: Agregue, elimine o modifique fotogramas clave en cualquier punto porcentual. Defina los valores de transform, la opacity y los colores de fondo de cada fotograma.
- Previsualice su animación: Observe cómo la vista previa en vivo se actualiza en tiempo real. Haga clic en Repetir para reiniciar la animación y comprobar el resultado.
- Copie el código CSS: Haga clic en el botón Copiar CSS para copiar al portapapeles el código generado de @keyframes y de las propiedades de animación.
- Péguelo en su proyecto: Agregue el CSS copiado a su hoja de estilos y aplique la clase de animación a sus elementos HTML.
Casos de uso
- Microinteracciones: Añada efectos hover sutiles, animaciones de botones e indicaciones de respuesta para mejorar la interacción del usuario.
- Indicadores de carga: Cree spinners personalizados, efectos de pulso y animaciones de pantallas esqueleto para los estados de carga.
- Transiciones de página: Construya efectos de deslizamiento, aparición gradual y zoom para elementos de la página que se animan al desplazarse o al cargar.
- Llamadas de atención: Diseñe animaciones de sacudida, rebote y pulso para dirigir la atención del usuario hacia elementos importantes de la interfaz.
- Prototipado de sistemas de diseño: Prototipe y estandarice rápidamente los patrones de animación en la biblioteca de componentes de su equipo.
- Aprender animaciones CSS: Experimente con fotogramas clave, funciones de temporización y propiedades de animación en un entorno visual.
- Efectos para presentaciones: Cree elementos animados para presentaciones y portafolios en la web.
Preguntas frecuentes
¿Esta herramienta es gratuita?
Sí, el generador de animaciones CSS es totalmente gratis y sin límites de uso. Puede crear animaciones ilimitadas, usar todas las plantillas y copiar el código CSS generado sin ninguna restricción.
¿Mis datos están seguros?
Toda la generación y la vista previa de las animaciones ocurren por completo en su navegador. No se envían datos a ningún servidor, por lo que sus configuraciones de animación y su código CSS permanecen totalmente privados.
¿Qué navegadores admiten las animaciones CSS?
Las animaciones CSS son compatibles con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. El código generado usa la sintaxis estándar de @keyframes, que funciona en todas las versiones actuales de los navegadores.
¿Puedo combinar varias animaciones en un mismo elemento?
Sí, puede aplicar varias animaciones a un solo elemento separando los nombres de las animaciones con comas en CSS. Genere cada animación por separado y combínelas en su hoja de estilos.
¿Qué es una función de temporización cubic-bezier?
Una función cubic-bezier define una curva de aceleración personalizada para su animación. Usa cuatro valores para controlar cómo se acelera y se desacelera la animación, y ofrece un control más preciso que opciones estándar como ease-in o ease-out.
Consejos y buenas prácticas
- Use transform y opacity: Anime las propiedades transform y opacity para obtener el mejor rendimiento, ya que la GPU puede acelerarlas por hardware.
- Mantenga las animaciones sutiles: Las animaciones sutiles (0.2s-0.5s) se sienten más pulidas que las largas y dramáticas en la mayoría de las interacciones de la interfaz.
- Respete las preferencias del usuario: Use la media query prefers-reduced-motion para desactivar o reducir las animaciones a los usuarios que prefieren menos movimiento.
- Elija los modos de relleno adecuados: Use "forwards" para conservar el estado final, "backwards" para aplicar el primer fotograma clave durante el retraso, o "both" para un control completo.
- Pruebe en varios dispositivos: Previsualice sus animaciones en dispositivos móviles, donde el rendimiento puede diferir del de los navegadores de escritorio.