Crea animaciones de fotogramas clave CSS con preajustes, temporización e iteración
Un generador de animaciones CSS te deja construir animaciones de keyframes de forma visual — eligiendo un efecto, fijando el tiempo, la suavización y cuántas veces se repite — y luego copiar el CSS, incluida la regla @keyframes y la propiedad animation. Las animaciones CSS mueven un elemento a través de una secuencia de estados definidos como keyframes, y escribirlas a mano implica hacer malabares con los porcentajes de keyframe, la duración, la función de tiempo y los ajustes de iteración a la vez. Elegir entre presets y ajustar los controles convierte eso en unos clics.
Las partes que dan forma a cómo se siente una animación son la duración, la función de tiempo y el número de iteraciones. La duración fija la velocidad; la función de tiempo (ease, linear, ease-in-out y curvas personalizadas) controla cómo el movimiento acelera y desacelera, que es lo que separa una animación de aspecto natural de una robótica; y el número de iteraciones decide si se reproduce una vez o en bucle. Ver el efecto en vista previa en vivo mientras ajustas esto es mucho más rápido que editar valores y recargar. Esta herramienta genera CSS basado en estándares en tu navegador, listo para pegar en cualquier elemento.
Una regla @keyframes define las etapas de una animación como porcentajes de 0% a 100%, cada uno especificando el estilo del elemento en ese punto. El navegador interpola suavemente entre ellos, así que de 0% { opacity: 0 } a 100% { opacity: 1 } produce un fundido de entrada. El generador escribe esta regla por ti.
La función de tiempo controla cómo varía la velocidad de la animación a lo largo de su duración. linear se mueve a ritmo constante, mientras que ease, ease-in-out y las curvas cubic-bezier personalizadas aceleran y desaceleran. La suavización correcta es lo que hace que el movimiento se sienta natural en vez de mecánico, así que afecta mucho al resultado.
Pon animation-iteration-count en infinite, que hace que se repita continuamente — usado en spinners, pulsos y efectos ambientales. Un número concreto la repite esas veces, y el valor por defecto de 1 la reproduce una vez. El generador expone esto para que elijas una sola reproducción o un bucle sin fin.
Sí — las animaciones de keyframes CSS tienen amplio soporte en los navegadores modernos. También se ejecutan de forma eficiente porque el navegador puede optimizarlas, y degradan con elegancia: si la animación no se soporta o está reducida, el elemento simplemente aparece en su estado final en vez de romperse.
Generador de sombra de caja CSS · Generador de radio de borde CSS · Generador de Flexbox · Generador de CSS Grid · Generador de sombra de texto CSS · Generador de filtros CSS