Generador de animación CSS
Configure el nombre, la duración, la aceleración, el recuento de iteraciones y la distancia de viaje. La herramienta genera @keyframes más una clase de utilidad, con una vista previa en vivo.
Hechos clave
- Categoría
- Diseño y color
- Precio
- Gratis
- Cuenta
- No requerido
- Tratamiento
- En tu navegador
- Aporte
- Archivos locales o datos pegados
- Plataforma
- Navegadores modernos de escritorio y móviles
que hace
Configure el nombre, la duración, la aceleración, el recuento de iteraciones y la distancia de viaje. La herramienta genera @keyframes más una clase de utilidad, con una vista previa en vivo.
Cree una animación de fotogramas clave que se desvanezca y se deslice con tiempos configurables.
como usarlo
Aquí está la versión corta del uso de Generador de animación CSS.
- Nombra la animación — Utilice un nombre de clase breve y descriptivo.
- Establecer tiempo — La duración y la relajación controlan cómo se siente el movimiento.
- Copia el CSS — Pega los fotogramas clave y la clase en tu hoja de estilo.
Características que importan
Lo que Generador de animación CSS hace bien.
- Nada sale de tu dispositivo — El trabajo ocurre en la pestaña de su navegador. No existe un punto final de carga en esta aplicación, por lo que no podemos almacenar, registrar ni ver sus archivos y texto.
- No hay espera de carga — Te saltas por completo el viaje de ida y vuelta a un servidor. Los resultados están limitados por su propia CPU, no por la velocidad de la red o el tamaño de la cola.
- Gratis, sin cuenta, sin cuotas — Sin muro de registro, sin marca de agua, sin límite diario. Las cuentas opcionales solo existen para guardar favoritos y ajustes preestablecidos en todos los dispositivos.
Preguntas frecuentes
¿Es seguro usar mi CSS aquí?
Sí. Esta herramienta se ejecuta completamente en su navegador mediante JavaScript. Nada de lo que pegas o abres se envía a un servidor y la página no guarda ninguna copia después de cerrarla.
¿Necesito crear una cuenta?
No. Todas las herramientas se pueden utilizar completamente sin iniciar sesión. Una cuenta solo agrega favoritos guardados y ajustes preestablecidos reutilizables.
¿Funciona en un teléfono?
Sí. La interfaz es móvil primero con objetivos táctiles grandes y un diseño apilado, por lo que funciona en teléfonos y tabletas, así como en computadoras de escritorio.
¿Cómo respeto el movimiento reducido?
Envuelva la animación en @media (prefiere movimiento reducido: sin preferencia) o proporcione una anulación de movimiento reducido que la desactive.
¿Por qué se reinicia la vista previa?
Cambiar cualquier configuración reconstruye la clase, lo que reinicia la animación para que puedas ver el nuevo tiempo.
Abierto Generador de animación CSS
Pruébelo ahora: se ejecuta en su navegador y no necesita cuenta.
Abre la herramienta