Acerca del 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.
como usarlo
- 1Nombra la animaciónUtilice un nombre de clase breve y descriptivo.
- 2Establecer tiempoLa duración y la relajación controlan cómo se siente el movimiento.
- 3Copia el CSSPega los fotogramas clave y la clase en tu hoja de estilo.
¿Por qué utilizar este generador de animación css?
- 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.