Idioma: Español

Convierte una animación HTML en GIF

Para README, pull requests, documentación, chats y cualquier sitio donde un video no se reproduzca. Pega el código, elige el tamaño y descarga el GIF.

O empieza con un ejemplo:

¿El código viene de una IA?

Vista previa

En cuanto pegues el código, la animación se verá aquí.

Deja esta pestaña en primer plano mientras se renderiza.

Descargar
Formato
Proporción
s

Todo ocurre en tu dispositivo. El archivo nunca se sube.

Pide a la IA un HTML listo para exportar

Pégalo después de tu petición o envíalo junto con el código que ya tienes. Así es más probable que se renderice sin problemas.

En tres pasos
  1. 1
    Pega
    Pega el HTML o suelta un archivo .html o .zip. La vista previa arranca al instante.
  2. 2
    Revisa
    Elige la proporción según dónde vayas a usar el video. La duración se detecta en la animación, y puedes cambiarla.
  3. 3
    Exporta
    Elige MP4, GIF, WebM transparente o un fotograma PNG, y descarga el archivo.
Pide a la IA un HTML listo para exportar
Pégalo después de tu petición o envíalo junto con el código que ya tienes. Así es más probable que se renderice sin problemas.
Reescribe esta animación como un único archivo HTML autocontenido que pueda exportar a video con htmlto.video:
- Diséñala para una proporción 16:9. Debe ocupar exactamente la ventana del navegador (100vw por 100vh, sin desplazamiento). Usa vw y vh para todos los tamaños, de modo que se adapte a cualquier resolución.
- Debe empezar sola al cargar la página, sin necesidad de ratón, teclado ni desplazamiento.
- Debe tener una duración fija. Indícala en un comentario en la primera línea, por ejemplo <!-- duration: 8s -->.
- Anima con animaciones CSS, la Web Animations API, GSAP o requestAnimationFrame usando su argumento de marca de tiempo. No uses video, audio ni iframes.
- Pon todo el CSS y el JavaScript dentro del propio HTML. Incrusta las imágenes como SVG en línea o como data URLs. Las fuentes y bibliotecas solo pueden cargarse desde un CDN que permita la carga de origen cruzado, como Google Fonts, cdnjs o jsDelivr.
- Responde con el HTML completo en un solo bloque de código.
Consejos para un buen GIF
Que sea corto
Un GIF pesa mucho enseguida. Entre tres y ocho segundos a 480p suele ser lo ideal para un README o un mensaje de chat.
Bucles sin saltos
Si la animación es un bucle, se recorta exactamente a un ciclo para que el GIF se repita sin saltos.
Mejor con colores planos
Un GIF admite 256 colores por fotograma. Las formas planas y el texto se ven nítidos; los degradados suaves y las fotos muestran bandas.
¿Buscas más calidad?
Exporta un MP4 con el mismo código: se ve más nítido y ocupa mucho menos, siempre que puedas usar video.
Qué puede renderizar
  • Animaciones y transiciones CSS
  • GSAP, anime.js, Motion y otras bibliotecas de JavaScript
  • Canvas 2D
  • SVG animado con CSS o JavaScript
  • WebGL y Three.js
  • La Web Animations API y requestAnimationFrame
Lo que aún no puede hacer
  • Safari, iPhone y iPad no pueden exportar, aunque la vista previa sí funciona.
  • Se omiten los videos, el audio y los iframes de la página.
  • Faltarán las imágenes y fuentes de servidores que bloquean la lectura de origen cruzado.
  • Las animaciones que esperan un clic, el paso del cursor o el desplazamiento no avanzarán.
  • No se captura el SVG animado con etiquetas SMIL como <animate>.
  • Las escenas WebGL muy pesadas pueden fallar en equipos lentos.