Generator animacji CSS Keyframe

Reguła CSS @keyframes to tak naprawdę mała oś czasu: zestaw procentowych punktów kontrolnych, z których każdy deklaruje, jak właściwość powinna wyglądać w danym momencie, a przeglądarka interpoluje wszystko pomiędzy. Tworzenie jej ręcznie oznacza utrzymywanie w głowie kilku takich punktów kontrolnych dla kilku właściwości jednocześnie — ten generator zamienia tę oś czasu w coś, co można rzeczywiście zobaczyć i przeciągać: jeden poziomy pas na właściwość, z markerem punktu na każdym punkcie kontrolnym.

Centralnym elementem jest suwak przewijania. Przeciągnij go do dowolnego punktu między 0% a 100%, a pole podglądu przeskoczy do dokładnego, złożonego stanu w tym momencie — nie do najbliższej klatki kluczowej, ale do rzeczywistej, liniowo interpolowanej wartości wyliczonej pomiędzy dwoma punktami otaczającymi wskaźnik na każdej aktywnej ścieżce. Właściwości numeryczne, takie jak pozycja, obrót i skala, interpolują jak zwykłe liczby; kolor tła interpoluje każdy kanał czerwony, zielony i niebieski niezależnie, co sprawia, że ścieżka koloru płynnie przechodzi przez pośrednie odcienie, zamiast przeskakiwać między ustawionymi kolorami.

Wiele ścieżek łączy się automatycznie w jedną spójną animację: każda właściwość oparta na transformacji (przesunięcie, obrót, skalowanie) scala się w pojedynczą deklarację transform w każdym procentowym punkcie kluczowym, podczas gdy przezroczystość i kolor tła pozostają w osobnych liniach, dokładnie tak, jak wyglądałby prawdziwy, ręcznie napisany CSS. Procenty, w których dana ścieżka nie ma jawnego punktu, są celowo pomijane w deklaracjach tej właściwości — interpolacja klatek kluczowych przeglądarki wypełnia lukę między istniejącymi punktami, tak samo jak w przypadku każdej ręcznie napisanej reguły @keyframes.

Pięć ustawień wstępnych — odbicie, wstrząs, pulsowanie, zanikanie i wsuwanie — ładuje kompletną, gotową do modyfikacji oś czasu (wraz z rozsądnym czasem trwania, funkcją wygładzania i liczbą powtórzeń) jednym kliknięciem. W dowolnym momencie naciśnij Odtwórz, aby zobaczyć prawdziwą animację CSS na elemencie podglądu, generowaną na bieżąco przez dynamicznie wstrzykiwany arkusz stylów, a następnie skopiuj cały blok @keyframes wraz ze skróconą deklaracją .animated-element { animation: ... } bezpośrednio do swojego projektu. Jak każde narzędzie na tej stronie, wszystko działa lokalnie w przeglądarce i nic nie jest nigdzie przesyłane.