Elija entre animaciones CSS preset
La herramienta ofrece doce animaciones CSS prediseñadas agrupadas por tipo: de entrada, de atención y de ciclo. Puede explorar cómo se ve cada una en tiempo real y decidir cuál se adapta mejor a la interacción que busca en su sitio o aplicación.
Estas animaciones cubren los efectos más populares y permiten visualizar el resultado antes de copiar el código. Así agiliza la fase de prototipo o implementación sin tener que escribir los keyframes manualmente.
Personalice parámetros y copie el CSS completo
Puede ajustar la duración, el retraso, el tipo de easing, la cantidad de repeticiones y activar el modo infinito para cada animación. Todos los cambios se reflejan al instante en la previsualización.
Al copiar el CSS, incluye los @keyframes, las propiedades de animación y el ajuste animation-fill-mode que garantiza que los efectos se mantengan según lo esperado. Además, se incorpora una regla @media (prefers-reduced-motion: no-preference) respetando la preferencia de movimiento de cada usuario.
Consideraciones de rendimiento y accesibilidad
Animar propiedades como transform y opacity suele ser más eficiente y suave que modificar layout (por ejemplo, width, height, top, left). Las animaciones de layout pueden provocar lentitud, especialmente en móviles.
La herramienta ayuda a entregar animaciones CSS que respetan la accesibilidad básica, pero para usuarios con sensibilidad al movimiento, asegúrese siempre de testear con la preferencia de movimiento reducida. Recuerde que la generación y previsualización se hace localmente, sin transferir ni guardar datos.
Preguntas frecuentes
¿Puedo crear animaciones personalizadas fuera de los presets?
No es posible crear keyframes totalmente nuevos, pero puede ajustar todos los parámetros disponibles en los doce presets. Esto permite adaptar los efectos a sus necesidades, aunque no generar animaciones completamente originales desde cero.
¿Puedo exportar el CSS para proyectos en React o Vue?
El CSS generado funciona en cualquier framework que acepte estilos estándar. Simplemente copie y pegue el código en su hoja de estilos o integrándolo en el componente correspondiente de React, Vue u otro sistema.
¿Es compatible el CSS generado con todos los navegadores?
Las animaciones usan propiedades modernas de CSS, por lo que funcionan en los principales navegadores actuales. En navegadores muy antiguos puede haber diferencias, especialmente en la interpretación de <code>animation-fill-mode</code> o <code>@media (prefers-reduced-motion)</code>.
¿Cómo hago mi animación accesible para personas sensibles al movimiento?
El CSS generado incluye una regla que detecta la preferencia de movimiento reducido. Si el usuario la tiene activa, la animación no se aplica. Aun así, es recomendable revisar y probar la experiencia para todos los usuarios.
¿Qué diferencia hay entre animar transform/opacity y animar layout?
Animar <b>transform</b> y <b>opacity</b> es más eficiente y suele resultar en efectos fluidos. Animar propiedades de layout como <b>width</b> o <b>top</b> puede causar ralentización y saltos visuales, sobre todo en dispositivos menos potentes.
¿Por qué mi animación se ve lenta o entrecortada en algunos dispositivos?
Esto suele ocurrir cuando se animan propiedades de layout, que requieren recalcular el diseño y pueden saturar la CPU. Para mejorar el rendimiento, prefiera efectos basados en <b>transform</b> y <b>opacity</b>.
¿Algo no funciona o tienes una idea para esta herramienta? Cuéntanos