Generator animacji klatek kluczowych CSS

Reguła CSS @keyframes to tak naprawdę mała oś czasu: zestaw procentowych punktów kontrolnych, z których każdy określa, jak właściwość powinna wyglądać dokładnie w tym momencie, a przeglądarka interpoluje wszystko pomiędzy. Ręczne zbudowanie takiego punktu oznacza umieszczenie w głowie kilku takich procentowych punktów kontrolnych jednocześnie dla kilku nieruchomości — ten generator przekształca tę oś czasu w coś, co można faktycznie zobaczyć i przeciągnąć: jeden poziomy pas na nieruchomość ze znacznikiem zatrzymania w każdym punkcie kontrolnym.

Centralnym elementem jest głowica szorująca. Przeciągnij go do dowolnego punktu pomiędzy 0% a 100%, a okno podglądu przeskoczy w tym momencie do dokładnie połączonego stanu — nie najbliższej klatki kluczowej, ale prawdziwej wartości interpolowanej liniowo, obliczonej pomiędzy dowolnymi dwoma przystankami otaczającymi głowicę odtwarzania na każdej aktywnej ścieżce. Właściwości numeryczne, takie jak pozycja, obrót i skala, są interpolowane jako zwykłe liczby; kolor tła interpoluje niezależnie każdy kanał czerwony, zielony i niebieski, co sprawia, że ​​ścieżka kolorów przechodzi płynnie przez odcienie pośrednie, zamiast przeskakiwać między faktycznie ustawionymi kolorami.

Wiele ścieżek łączy się automatycznie w jedną spójną animację: każda właściwość oparta na transformacji (przesuwanie, obracanie, skalowanie) łączy się w jedną deklarację transformacji dla każdego procentu klatki kluczowej, podczas gdy krycie i kolor tła pozostają w swoich własnych liniach, dokładnie tak, jak wyglądałby prawdziwy, odręczny CSS. Procenty, w których dana ścieżka nie ma wyraźnego zatrzymania, są po prostu celowo pomijane w deklaracjach tej właściwości — własna interpolacja klatek kluczowych przeglądarki wypełnia lukę pomiędzy istniejącymi przystankami, w taki sam sposób, jak w przypadku dowolnej reguły @keyframes wpisanej ręcznie.

Pięć gotowych ustawień — odbijanie, wstrząsanie, pulsowanie, zanikanie i wsuwanie — umożliwia załadowanie kompletnej, gotowej do modyfikacji osi czasu (w tym rozsądnego czasu trwania, funkcji pomiaru czasu i liczby powtórzeń) jednym kliknięciem. Naciśnij przycisk Odtwórz w dowolnym momencie, aby zobaczyć prawdziwą animację CSS działającą na elemencie podglądu, wygenerowaną na bieżąco za pomocą dynamicznie wstrzykiwanego arkusza stylów, a następnie skopiuj pełny blok @keyframes plus skrót .animated-element {animacja: ... } bezpośrednio do własnego projektu. Jak każde narzędzie na tej stronie, wszystko działa lokalnie w przeglądarce i nic nie jest przesyłane.