Generador de animaciones CSS
Generador de animaciones CSS: crea keyframes de entrada y la declaración animation con duración configurable.
Nombre y duración de entrada
Escribe un nombre y una duración positiva en segundos. El nombre se normaliza para formar un identificador CSS: pasa a minúsculas, pierde diacríticos y sustituye grupos no alfanuméricos por guiones. La duración se inserta con s en la propiedad animation.
Movimiento generado
Los @keyframes empiezan con opacity: 0 y transform: translateY(12px). Terminan con opacity: 1 y translateY(0). El selector .elemento aplica ese nombre con curva ease y modo both, por lo que conserva los valores pertinentes antes y después de la ejecución.
Ejemplo con aparición suave
Nombre «Entrada Suave» y duración 0.6 producen un identificador entrada-suave y la regla animation: entrada-suave 0.6s ease both. El elemento asciende doce píxeles mientras aparece. No se añade retraso, repetición ni dirección alternativa.
Conflicto con otros transform
La animación controla transform completo. Si .elemento ya usa scale, rotate o translate para su diseño, los keyframes pueden sustituirlo mientras se ejecutan. Combina las transformaciones en los mismos fotogramas o anima un contenedor separado para no perderlas.
Movimiento reducido y activación
El fragmento no incorpora prefers-reduced-motion ni decide cuándo agregar la clase. Añade una media query que reduzca o desactive el movimiento para quien lo solicite. Define también si la animación comienza al cargar, al entrar en pantalla o tras una interacción.
Si varios elementos usan la misma clase, todos pueden empezar cuando la regla se aplica. Para escalonarlos necesitas animation-delay individual, por ejemplo mediante variables CSS o selectores nth-child. Un retraso no cambia la duración de cada recorrido, solo el momento en que comienza.
El modo both aplica backwards durante un posible retraso y forwards al terminar. En este caso ayuda a mantener opacidad cero antes del comienzo y el estado visible después. Si quitas both, el elemento puede aparecer en su estilo normal antes o después de animarse.
Reiniciar la animación
Volver a aplicar una clase que ya está presente no siempre reinicia los keyframes. Una interfaz puede quitarla, forzar el cambio de estado y añadirla de nuevo, o crear otro elemento. Decide ese comportamiento en JavaScript; el CSS generado solo define el recorrido cuando el navegador inicia la animación.
Fuentes y referencias
Continúa con estas herramientas
Preguntas frecuentes
¿Qué efecto crea?
Una aparición desde doce píxeles más abajo hasta la posición normal, cambiando opacidad de cero a uno.
¿Qué nombres son válidos?
La herramienta convierte el texto en un identificador con minúsculas, números y guiones.
¿Puedo indicar 0 segundos?
La duración debe ser positiva; cero no representa una animación útil en este formulario.
¿Se repite indefinidamente?
No. La propiedad generada no incluye iteration-count infinite y se ejecuta una vez.
¿Por qué desaparece mi escala CSS?
Los keyframes escriben transform y pueden reemplazar otra transformación aplicada al mismo elemento.
¿Respeta automáticamente reduced motion?
No. Debes añadir una regla @media (prefers-reduced-motion: reduce) adecuada a tu interfaz.
Herramienta de OCC Tools