---
title: "Klatka kluczowa: co to jest? Słownik pojęć"
description: "Klatka kluczowa to punkt na osi czasu, w którym animator zapisuje stan elementu: położenie, wielkość, obrót, kolor albo przezroczystość."
url: https://fluostudio.pl/baza-wiedzy/slownik/klatka-kluczowa/
---

[Animacja i wideo](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=animacja)

# Klatka kluczowa

Inaczej keyframe, key frame

Klatka kluczowa to punkt na osi czasu, w którym animator zapisuje stan elementu: położenie, wielkość, obrót, kolor albo przezroczystość. Ruch między dwoma takimi punktami program wylicza sam.

## Usługa

-   [Motion design](https://fluostudio.pl/uslugi/projektowanie-graficzne/motion-design/)

Nazwa pochodzi z animacji rysunkowej. Główny animator rysował najważniejsze pozy postaci, a asystenci dorysowywali między nimi rysunki pośrednie, klatka po klatce. W programach do animacji ten podział został. Animator ustawia klatki kluczowe, a resztę dopowiada komputer.

Przykład: logo w chwili zero ma zerowy rozmiar, a pół sekundy później pełny. To dwie klatki kluczowe. Wszystkie stany pośrednie program liczy sam. To, czy logo urośnie równo, czy wystrzeli i łagodnie zahamuje, zależy od krzywej między klatkami, czyli od [easingu](https://fluostudio.pl/baza-wiedzy/slownik/easing/).

## Ręczna robota

Gotowe presety ustawiają klatki za animatora, dlatego ruch z nich wygląda wszędzie podobnie. Ręczne animowanie to w praktyce ręczne ustawianie klatek: dodatkowa klatka, w której element przelatuje odrobinę za cel i wraca, krótka pauza przed ruchem, inny czas dla każdego elementu. Z tych drobiazgów bierze się różnica między ruchem z szablonu a ruchem, który pasuje do marki i jej [motion designu](https://fluostudio.pl/baza-wiedzy/slownik/motion-design/).

## To samo słowo w wideo i na stronach

W plikach wideo klatka kluczowa oznacza coś innego: pełny obraz, po którym kolejne klatki zapisują już tylko zmiany. Stąd w programach do nagrywania i transmisji na żywo ustawienie „interwał klatek kluczowych”. Do transmisji na żywo YouTube i Twitch zalecają 2 sekundy.

W kodzie stron to samo słowo znajdziesz w CSS. Reguła @keyframes opisuje stany animacji w procentach jej czasu. Tak powstaje wiele animacji na stronach, od wskaźników ładowania po [mikrointerakcje](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/).

## Zobacz też

-   [Animacja i wideo Easing Easing to sposób, w jaki animowany element przyspiesza i zwalnia. Dzięki niemu ruch nie jest mechanicznie równy, tylko rusza i hamuje jak prawdziwy przedmiot.](https://fluostudio.pl/baza-wiedzy/slownik/easing/)
-   [Animacja i wideo Motion design Motion design to projektowanie ruchu w grafice. Animowane logo, ikony, napisy, wykresy i przejścia pokazują charakter marki i tłumaczą rzeczy szybciej niż statyczny obraz.](https://fluostudio.pl/baza-wiedzy/slownik/motion-design/)
-   [Animacja i wideo Animatik Animatik to robocza wersja filmu: kadry ze storyboardu ułożone w czasie, z tymczasowym lektorem i muzyką. Pokazuje tempo i długość scen, zanim powstanie pełna animacja.](https://fluostudio.pl/baza-wiedzy/slownik/animatik/)
-   [Animacja i wideo Animacja logo Animacja logo to krótki, zwykle kilkusekundowy ruch, w którym znak marki pojawia się, składa albo zmienia. Otwiera i zamyka filmy, spoty, prezentacje i posty.](https://fluostudio.pl/baza-wiedzy/slownik/animacja-logo/)
-   [Animacja i wideo Lottie Lottie to format animacji wektorowych zapisanych w pliku JSON, najczęściej eksportowanych z After Effects. Na stronach i w aplikacjach zwykle waży mniej niż film i jest ostry w każdym rozmiarze.](https://fluostudio.pl/baza-wiedzy/slownik/lottie/)
-   [Strony www Mikrointerakcja Mikrointerakcja to drobna reakcja interfejsu na jedno działanie użytkownika, np. zmiana przycisku po naciśnięciu albo animacja licznika w koszyku. Pokazuje, że system przyjął polecenie i co dzieje się dalej.](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/)

## Potrzebujesz ruchu, który pasuje do marki? Pokażemy, jak to robimy.

Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań.

[Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)