Generador de animación CSS
Opciones
Vista previa en vivo
¿Qué es el generador de animaciones CSS?
Esta herramienta le ayuda a crear valores abreviados de animación CSS junto con fotogramas clave coincidentes.
Es útil para movimientos de la interfaz de usuario, efectos de desplazamiento, revelaciones de animaciones, tarjetas, botones y experimentos de diseño rápidos.
Cómo utilizar el generador de animaciones CSS
- Elija una animación preestablecida.
- Ajuste la duración, el retraso, la función de sincronización, el recuento de iteraciones, la dirección y el modo de llenado.
- Mire la vista previa en vivo a la derecha.
- Copie la taquigrafía de la animación, los fotogramas clave o la regla CSS completa.
Consejos
- Utilice duraciones más cortas para animaciones sutiles de la interfaz de usuario.
- Utilice iteración infinita para repetir efectos como pulso o rebote.
- Utilice el modo de relleno cuando desee que el elemento mantenga el estado visual inicial o final.
- Combine esto con CSS Transform Generator para obtener efectos de movimiento más avanzados.
Comprobaciones de animación CSS antes de publicar movimiento
El movimiento debe comunicar estado sin bloquear interacción, causar molestias o generar layout y paint costosos.
Respeta reduced motion
Ofrece un estado reducido o estático útil con prefers-reduced-motion, no solo una animación más corta.
Anima propiedades eficientes
Prefiere transform y opacity y perfila cambios de layout, filtros, sombras, máscaras o áreas grandes.
Prueba el ciclo completo
Revisa delay, iteration, direction, fill mode, interrupción, visibilidad, repetición y estado final.
Mantén la interacción usable
Verifica focus, pointer, scroll, lectura y controles durante el movimiento sin ocultar contenido esencial.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.