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.
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.
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.