ZAWODNIK

Animacja: GIF, CSS, JavaScript, SVG, canvas

INF.03 · teoria
autor: redakcja · 02.11.2026
Klatki, czas i pętla animacji, wybór GIF, CSS lub JavaScript oraz różnica między SVG i canvas. Krótka animacja elementu sklepu z uwzględnieniem ograniczenia ruchu. Lekcja 5.6 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: Grafika i multimediaĆwicz temat: Grafika i multimedia
Ani­ma­cja to zmiana ko­lej­nych ob­ra­zów lub wła­ści­wo­ści ele­men­tu w czasie, dająca wra­że­nie ruchu. Na eg­za­mi­nie trzeba roz­po­znać sposób jej wy­ko­na­nia i od­czy­tać czas, liczbę po­wtó­rzeń oraz klatki klu­czo­we. W prak­ty­ce przy­go­to­wu­jesz ruch zgodny z po­le­ce­niem, na przy­kład po­ja­wie­nie się ozna­cze­nia pro­duk­tu, bez utrud­nia­nia od­czy­tu i ob­słu­gi strony.

Klatka, czas i pętla

Klatka to stan obrazu wy­świe­tla­ny w okre­ślo­nej chwili. Ani­mo­wa­ny GIF za­pi­su­je serię klatek i czas pre­zen­ta­cji każdej z nich. Ani­ma­cja CSS może za­miast wszyst­kich go­to­wych ob­ra­zów prze­cho­wać stany klu­czo­we: po­czą­tek i koniec, a prze­glą­dar­ka wy­zna­cza war­to­ści po­śred­nie. Oba po­dej­ścia opi­su­ją ruch, ale ilość danych i moż­li­wość re­ago­wa­nia na dzia­ła­nia użyt­kow­ni­ka są inne.
Czas trwa­nia okre­śla dłu­gość po­je­dyn­cze­go prze­bie­gu. Ani­ma­cja trwa­ją­ca 2 se­kun­dy i po­wtó­rzo­na trzy razy zaj­mu­je łącz­nie 6 sekund, jeśli nie ma do­dat­ko­we­go opóź­nie­nia. Opóź­nie­nie prze­su­wa roz­po­czę­cie, a nie wy­dłu­ża każdej klatki. War­tość nie­skoń­czo­ne­go po­wta­rza­nia spra­wia, że ruch nie kończy się sam. Przy re­kla­mo­wym ba­ne­rze może to stale roz­pra­szać osobę, która pró­bu­je prze­czy­tać opis pro­duk­tu.
Pętla to po­wta­rza­nie se­kwen­cji. Aby ruch nie prze­ska­ki­wał przy po­wro­cie do po­cząt­ku, ostat­ni stan można do­pa­so­wać do pierw­sze­go albo uru­cho­mić prze­bie­gi na­prze­mien­ne. Trzeba jednak spraw­dzić re­zul­tat, po­nie­waż powrót do punktu po­cząt­ko­we­go może być za­mie­rzo­ną czę­ścią ani­ma­cji. Samo usta­wie­nie po­wta­rza­nia nie tworzy płyn­ne­go przej­ścia między końcem a po­cząt­kiem.
Sto­ry­bo­ard, czyli plan ko­lej­nych scen, pomaga usta­lić ruch przed otwar­ciem pro­gra­mu. Dla ety­kie­ty „Nowość” w skle­pie wy­star­czą trzy stany: ukryta, lekko unie­sio­na i wi­docz­na w do­ce­lo­wym po­ło­że­niu. Taki plan okre­śla czas i cel ani­ma­cji. Jeśli nie wia­do­mo, jaką in­for­ma­cję ruch prze­ka­zu­je, łatwo dodać efekt, który tylko prze­szka­dza.

Ani­mo­wa­ny obraz

GIF jest pli­kiem, który można osa­dzić tak jak zwykły obraz. Od­twa­rza­nie wynika z jego za­war­to­ści, a nie z ar­ku­sza CSS strony. W edy­to­rze ob­słu­gu­ją­cym ani­ma­cje przy­go­tuj ko­lej­ne klatki o jed­na­ko­wych wy­mia­rach, ustaw czasy, sprawdź pod­gląd i wy­eks­por­tuj jako ani­ma­cję. Za­pi­sa­nie zwy­kłe­go po­je­dyn­cze­go obrazu do GIF nie sprawi, że za­cznie się po­ru­szać.
Przy­go­to­wu­jąc ani­mo­wa­ną in­struk­cję zmiany ba­te­rii myszy, za­cho­waj stałe ka­dro­wa­nie i wy­star­cza­ją­cy czas na odczyt każ­de­go kroku. Duża liczba klatek, duże wy­mia­ry i długi czas mogą dać ciężki plik. GIF ma ogra­ni­czo­ną paletę, więc fil­mo­we ujęcia mogą wy­glą­dać gorzej niż w for­ma­cie wideo. Nie prze­cho­wu­je też dźwię­ku. Dla dłuż­sze­go na­gra­nia pro­duk­tu wy­god­niej­szy bywa film z od­twa­rza­czem.
Prze­glą­dar­ka nie daje zwy­kłe­mu <img> uni­wer­sal­ne­go ze­sta­wu przy­ci­sków pauzy jak dla <video>. Jeśli ani­ma­cja ma trwać długo, za­pla­nuj sposób za­trzy­ma­nia albo wy­bierz me­cha­nizm, który da się kon­tro­lo­wać. Przy­go­tuj rów­nież nie­ru­cho­mą wersję prze­ka­zu­ją­cą tę samą istot­ną in­for­ma­cję. Sam tekst al­ter­na­tyw­ny opi­su­je zna­cze­nie obrazu, ale nie jest przy­ci­skiem wy­łą­cza­ją­cym ruch.

CSS: przej­ście i klatki klu­czo­we

transition (przej­ście) ani­mu­je zmianę war­to­ści wła­ści­wo­ści, gdy zmie­nia się stan ele­men­tu. Przy­kła­dem jest de­li­kat­ne prze­su­nię­cie przy­ci­sku po na­je­cha­niu. Po­trzeb­ny jest stan po­cząt­ko­wy, stan koń­co­wy i czas. Bez zmiany wła­ści­wo­ści samo przej­ście nie wykona ruchu. Roz­wi­nię­cie skład­ni znaj­du­je się w lekcji o efek­tach CSS.
animation (ani­ma­cja) od­wo­łu­je się do na­zwa­nej se­kwen­cji @keyframes (klatek klu­czo­wych). Można uru­cho­mić ją po za­ła­do­wa­niu ele­men­tu, bez cze­ka­nia na na­je­cha­nie. Dla ety­kie­ty pro­duk­tu za­pisz­my krótki, jed­no­ra­zo­wy ruch. HTML po­wi­nien za­wie­rać ele­ment z klasą nowosc i tek­stem „Nowość”.
1
2
3
4
5
6
7
8
.nowosc { animation: pojawienie 600ms ease-out both; }
@keyframes pojawienie {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.nowosc { animation: none; }
}
Po­czą­tek ma zerowe krycie i prze­su­nię­cie o 8 px w dół, a koniec pełne krycie i brak prze­su­nię­cia. ease-out ozna­cza zwal­nia­nie przy końcu. both okre­śla za­sto­so­wa­nie stanów ani­ma­cji poza jej ak­tyw­nym prze­bie­giem. Po wy­łą­cze­niu ani­ma­cji ele­ment nadal jest wi­docz­ny dzięki zwy­kłe­mu ukła­do­wi strony. Nie usta­wia­my mu w pod­sta­wo­wym stylu trwa­łe­go ze­ro­we­go krycia, które ukry­ło­by treść po re­zy­gna­cji z ruchu.
Klu­czo­we stany można okre­ślić pro­cen­ta­mi: 0 pro­cent to po­czą­tek, 50 środek, a 100 koniec prze­bie­gu. Pro­cent odnosi się do czasu, nie do sze­ro­ko­ści ekranu. Wła­ści­wość animation-iteration-count podaje liczbę po­wtó­rzeń, animation-direction kie­ru­nek, a animation-play-state stan od­twa­rza­nia. Ich zna­cze­nie opi­su­je spe­cy­fi­ka­cja ani­ma­cji CSS W3C.

JavaScript, SVG i canvas

JavaScript po­zwa­la po­wią­zać ani­ma­cję z ob­li­cze­nia­mi, ste­ro­wa­niem i danymi. Do po­je­dyn­cze­go prze­su­nię­cia nie trzeba jednak ręcz­nie ak­tu­ali­zo­wać po­ło­że­nia w pętli. Skrypt może dodać klasę, a CSS wykona ruch. Dzięki temu kod zda­rze­nia opi­su­je, kiedy ma się coś wy­da­rzyć, a arkusz stylów jak ma wy­glą­dać przej­ście.
requestAnimationFrame (żą­da­nie klatki ani­ma­cji) prosi prze­glą­dar­kę o wy­wo­ła­nie funk­cji przed ko­lej­nym od­ma­lo­wa­niem. Przy ruchu li­czo­nym w skryp­cie używa się czasu prze­ka­za­ne­go do funk­cji, za­miast za­kła­dać stałe 60 klatek na se­kun­dę. Na innym ekra­nie liczba wy­wo­łań może być inna, a nie­ak­tyw­na karta może otrzy­my­wać je rza­dziej. Do­da­wa­nie stałej od­le­gło­ści w każdym wy­wo­ła­niu uza­leż­nia­ło­by pręd­kość od urzą­dze­nia.
SVG prze­cho­wu­je obiek­ty wek­to­ro­we, które można zmie­niać przez CSS lub skrypt. Symbol mo­ni­to­ra w logo może mieć osobne ele­men­ty od­po­wia­da­ją­ce ob­ry­so­wi i ekra­no­wi. Zmiana krycia samego ekranu nie wymaga ry­so­wa­nia całego logo od nowa. Ważne napisy i przy­ci­ski nadal po­win­ny mieć sen­sow­ną struk­tu­rę oraz nazwę do­stęp­ną dla tech­no­lo­gii wspo­ma­ga­ją­cych.
<canvas> (płótno) udo­stęp­nia obszar ry­so­wa­ny po­le­ce­nia­mi skryp­tu. W ani­ma­cji gry lub wy­kre­su trzeba zwykle czy­ścić od­po­wied­ni obszar i po­now­nie ry­so­wać zmie­nio­ny stan. Na­ry­so­wa­ny pro­sto­kąt nie staje się au­to­ma­tycz­nie przy­ci­skiem HTML z ob­słu­gą kla­wia­tu­ry. Canvas wymaga osob­ne­go planu do­stęp­no­ści i tek­sto­wej re­pre­zen­ta­cji waż­nych danych. Dla­te­go nie za­stę­puj nim zwy­kłe­go menu sklepu.

Ruch, który nie blo­ku­je treści

Ogra­ni­cze­nie ruchu ozna­cza uwzględ­nie­nie pre­fe­ren­cji osób, którym ani­ma­cje utrud­nia­ją ko­rzy­sta­nie ze strony. Za­py­ta­nie prefers-reduced-motion (pre­fe­ro­wa­ne ogra­ni­cze­nie ruchu) po­zwa­la zre­zy­gno­wać z efek­tów lub zmniej­szyć ich in­ten­syw­ność. Zmiana usta­wie­nia nie po­win­na ukry­wać funk­cji ani danych. Jeśli in­for­ma­cja „pro­dukt dodany do ko­szy­ka” była po­ka­zy­wa­na ani­ma­cją, musi po­zo­stać także jako tekst.
Ruch roz­po­czy­na­ny au­to­ma­tycz­nie i trwa­ją­cy ponad pięć sekund obok innej treści wymaga, przy wa­run­kach wska­za­nych w WCAG, moż­li­wo­ści za­trzy­ma­nia, wstrzy­ma­nia lub ukry­cia. Uni­ka­my także mi­ga­nia, które może sta­no­wić za­gro­że­nie dla od­bior­ców wraż­li­wych na błyski. Nie pró­bu­je­my uza­sad­niać szyb­kie­go pul­so­wa­nia tym, że ety­kie­ta jest mała. Lepiej wybrać spo­koj­ną zmianę i po­zwo­lić skupić się na treści.
Koszt ani­ma­cji zależy od wła­ści­wo­ści i liczby ele­men­tów. Zmiana po­ło­że­nia przez prze­kształ­ce­nie oraz krycia często jest prak­tycz­niej­sza niż ciągłe prze­li­cza­nie sze­ro­ko­ści wielu bloków. Nie sta­no­wi to jednak gwa­ran­cji płyn­no­ści. Sprawdź stronę na słab­szym urzą­dze­niu, przy prze­wi­ja­niu i z dłuż­szy­mi na­zwa­mi pro­duk­tów. Efekt po­wi­nien dzia­łać wraz z tre­ścią, a nie zaj­mo­wać cały czas pro­ce­so­ra.

Na eg­za­mi­nie

W py­ta­niu o CSS od­czy­taj naj­pierw nazwę se­kwen­cji, potem czas, opóź­nie­nie i po­wtó­rze­nia. Trzy prze­bie­gi po 2 se­kun­dy to 6 sekund ruchu, na­to­miast opóź­nie­nie 1 se­kun­dy przed nimi daje za­koń­cze­nie po 7 se­kun­dach. Se­kwen­cja z from i to ma dwa stany klu­czo­we, nawet jeśli prze­glą­dar­ka na­ry­su­je wiele stanów po­śred­nich.
Pu­łap­ka: transition nie roz­po­czy­na ruchu bez zmiany stanu, a samo roz­sze­rze­nie GIF nie do­wo­dzi obec­no­ści kilku klatek.
W za­da­niu prak­tycz­nym wy­ko­naj wska­za­ną tech­ni­kę i sprawdź pełny prze­bieg, nie tylko jego po­czą­tek. Obej­rzyj koniec, powrót do po­cząt­ku oraz wa­riant z ogra­ni­cze­niem ruchu. Jeśli po­le­ce­nie wymaga ani­mo­wa­ne­go pliku, oddaj plik ani­ma­cji; kod CSS na stro­nie nie za­stę­pu­je ta­kie­go re­zul­ta­tu.

Ściąga

Me­cha­nizm
Do czego
GIF
gotowa se­kwen­cja ra­stro­wych klatek
transition
przej­ście po zmia­nie wła­ści­wo­ści
@keyframes
na­zwa­ne stany ani­ma­cji
animation-duration
czas jed­ne­go prze­bie­gu
animation-iteration-count
liczba po­wtó­rzeń
JavaScript
ste­ro­wa­nie za­leż­ne od zda­rzeń i danych
SVG
ani­mo­wa­ne obiek­ty wek­to­ro­we
Canvas
ry­so­wa­nie ko­lej­nych stanów skryp­tem
prefers-reduced-motion
uwzględ­nie­nie ogra­ni­cze­nia ruchu
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Dźwięk i wideo: próbkowanie, bitrate, formaty, kodeki, Audacity, osadzaniespis działu: Grafika i multimedia

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuDokumenty CKEFormularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03JavaScript na egzaminie INF.03Zapytania SQL na egzaminie INF.03Bazy danych i SQL na egzaminie INF.03pokaż więcej (85)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulaminKontakt
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.