# HTML do GIF: animacja CSS jako GIF albo MP4
> Animacja HTML i CSS jako animowany GIF albo MP4 jednym wywołaniem API: nagrywanie co do klatki, limity i jak zrobić to samemu.
Opublikowano 2026-11-06 · https://shareglint.com/pl/html-to-gif
Żeby zamienić HTML na GIF, potrzebujesz przeglądarki, która odtworzy animację, i czegoś, co zrobi z jej klatek plik. Shareglint robi jedno i drugie: zapisujesz HTML i CSS jako szablon, wywołujesz go z `"format": "gif"` albo `"format": "mp4"` i dostajesz zapętlony GIF albo MP4 w H.264 o długości do 5 s. Ten sam szablon wyrenderowany jako PNG daje wersję statyczną, więc jeden projekt obsłuży animowany post i nieruchomy `og:image`.
Ten poradnik dotyczy samej konwersji: jak działa nagrywanie, jak wygląda zapytanie, jakie są limity i ile pracy wymaga własna wersja na Puppeteerze i ffmpeg. O tym, gdzie animowane obrazki w ogóle się odtwarzają — podglądy linków zwykle pokazują tylko pierwszą klatkę — pisze poradnik o [animowanych obrazkach OG](https://shareglint.com/en/guides/animated-og-images-gif-mp4) (po angielsku).
## Klatka po klatce, a nie nagrywanie na żywo
Program do nagrywania ekranu filmuje stronę w czasie rzeczywistym, więc obciążona maszyna gubi klatki, a każde nagranie wychodzi trochę inaczej. Renderer w ogóle nie puszcza czasu. Przy każdej klatce zatrzymuje wszystkie animacje i przejścia CSS na stronie i ustawia je na dokładny moment tej klatki przez Web Animations API ([`document.getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations)), a potem ją przechwytuje. Trzysekundowy klip przy 15 fps to 45 klatek w chwilach 0, 66,7, 133,3… ms — za każdym razem tych samych.
Wynikają z tego dwie rzeczy. Ten sam szablon z tymi samymi polami zawsze daje ten sam plik, dlatego powtórzone zapytanie jest serwowane z pamięci podręcznej za darmo. I działa wszystko, co da się animować w CSS: `transform`, `opacity`, kolory, `clip-path`, `filter`, `background-position`, keyframes z opóźnieniami i funkcjami czasu, przejścia.
## Zapytanie
Zapisz szablon raz:
```bash
curl -X POST "https://shareglint.com/v1/templates" \
-H "Authorization: Bearer sk_live_..." \
-H "Content-Type: application/json" \
-d '{
"name": "Launch banner",
"slug": "launch-banner",
"width": 1200, "height": 630,
"fields": ["headline"],
"html": "",
"css": ".wrap{height:100%;display:grid;place-content:center;background:#0b1020;color:#fff;font:700 72px Roboto}.bar{height:12px;background:#ff7a18;transform-origin:left}.motion h1{animation:rise var(--clip) ease-out both}.motion .bar{animation:grow var(--clip) ease-in-out both}@keyframes rise{from{opacity:0;transform:translateY(40px)}}@keyframes grow{from{transform:scaleX(0)}}"
}'
```
Potem wyrenderuj go jako klip:
```bash
curl -X POST "https://shareglint.com/v1/images?wait=true" \
-H "Authorization: Bearer sk_live_..." \
-H "Content-Type: application/json" \
-d '{
"template": "launch-banner",
"format": "gif",
"duration": 3,
"fps": 15,
"modifications": { "headline": "Wersja 2 już jest" }
}'
```
Odpowiedź to zwykły render z obiektem `animation` (`duration`, `fps`, `frames`) i adresem pliku w `url`. Zamień `gif` na `mp4`, żeby dostać wideo, dodaj `"sizes": ["og", "square", "story"]`, żeby mieć tę samą animację w innych kształtach (szablon układa się od nowa w każdym z nich — zobacz [jeden szablon, każdy rozmiar](https://shareglint.com/pl/features/one-template-every-size)), albo użyj podpisanego adresu kończącego się na `.gif`, żeby renderować prosto z tagu `![]()
`, bez serwera.
Ważne są dwa zaczepy w powyższym CSS. Podczas renderu GIF-a albo MP4 element `` ma klasę **`motion`** i zmienną CSS **`--clip`** z długością klipu. Render statyczny nie ma klasy `motion`, więc PNG pokazuje gotowy projekt, a jeśli czas każdej animacji podasz jako ułamek `var(--clip)`, render dwusekundowy i pięciosekundowy odegrają całą sekwencję.
Wbudowane szablony animowane — odliczanie, licznik statystyk, pisany nagłówek, odsłona produktu i inne, wszystkie ze slugami zaczynającymi się od `animated-` — działają tak samo i nie wymagają pisania CSS.
## Limity
| | |
|---|---|
| Długość | od 0,5 do 5 s, domyślnie 3 |
| Liczba klatek | 10–30 fps; domyślnie 15 dla GIF-a, 30 dla MP4 |
| Rozmiar | dłuższy bok najwyżej 1080 px, oba boki parzyste (`og` 1200×630 daje 1080×566) |
| GIF | zapętlony bez końca, jedna paleta 256 kolorów wyliczona dla całego klipu |
| MP4 | H.264, yuv420p, `faststart`, bez dźwięku |
| Skrypty | usuwane z twoich szablonów przy zapisie — tylko animacje CSS |
| Zlecenia hurtowe | tylko formaty statyczne; jeden klip na zapytanie |
| Koszt | 5 renderów z limitu na klip i rozmiar |
Limit długości jest celowy: to narzędzie do pętli, które wiszą w feedzie, w mailu albo w wiadomości na czacie, a nie do nagrań ekranu czy filmów produktowych. Trzysekundowy GIF przy 15 fps waży mniej więcej od 0,1 do 3 MB, zależnie od tego, jaka część kadru się rusza; MP4 z tego samego klipu to ułamek tej wielkości.
## GIF czy MP4
- **Mail:** GIF. To jedyna animacja, która odtwarza się w większości klientów poczty; element HTML `