Łatwo buduj animacje CSS za pomocą Animista

Tam są mnóstwo internetowych aplikacji do animacji CSS. Ale bardzo niewiele porównuje się do poziomu szczegółowości i łatwości użytkowania Animista.

Ta darmowa aplikacja internetowa pozwala generuj niestandardowe animacje CSS jednym kliknięciem. Możesz wybierać spośród wstępnie zaprojektowanych ruchów, takich jak slajdy, transformacje, huśtawki, a nawet animacje upuszczania cieni.

Po utworzeniu animacji możesz wyeksportuj kod tak jak w przypadku innych generatorów CSS. Z wyjątkiem tego, że kod ten jest znacznie łatwiejszy w obsłudze, a nawet pochodzi z wbudowanym narzędziem minifizera.

Interfejs może początkowo być mylący, ale tylko dlatego, że masz wiele opcji!

Tworzysz niestandardowe animacje następujące trzy główne kroki i korzystanie z interfejsu od góry do dołu:

1. Wybierz styl ruchu (swing, slide, flip-scale) z kółek na górze
2. Dostosuj go za pomocą różnych typów ruchu pod spodem
3. Edytuj opcje animacji na pływającym lewym pasku opcji

Dzięki temu procesowi możesz zmienić całkowity czas trwania animacji, styl rozluźnienia, opóźnienie, prawie wszystko. I to wszystko działa przez czysty CSS3, co czyni go jeszcze bardziej imponującym.

Zwróć także uwagę na najwyższy navbar, z którego możesz nawet wybierać różne typy stylów docelowych animacji.

The domyślnie “podstawowy” które mogą działać na prawie każdym (najechanie, kliknięcie lub natychmiastowa animacja). Inne cele obejmują tekst strony, animacje tła, a nawet niestandardowe animacje wejściowe aby wyświetlić ukryty element strony.

Szczególnie podoba mi się “Uwaga” link na górze, który ma fajne efekty wstrząsów i drgań dla stylów przycisków. Działają doskonale na przyciskach CTA, aby przyciągnąć uwagę i zachęcić do interakcji z użytkownikiem.

Po zakończeniu dostosowywania po prostu kliknij ikonę małego nawiasu w prawym górnym rogu okienka podglądu.

Spowoduje to wyświetlenie nowej strony za pomocą pełna klasa animacji CSS wraz z klatkami kluczowymi. Opcjonalne funkcje pozwalają zminimalizuj kod i dołącz auto-prefiks który obsługuje starsze przeglądarki internetowe.

Użyłem mnóstwo niestandardowych narzędzi do animacji CSS i bez wątpienia Animista jest najbardziej bogatym w funkcje narzędziem. Z początku jest całkowicie darmowy i nieco skomplikowany, ale kiedy zrozumiesz interfejs, jest zdecydowanie najlepszym generatorem, jakiego możesz użyć.

Aby spróbować, odwiedź stronę główną i kliknij “Spróbuj mnie”. Możesz także dzielić się swoimi przemyśleniami i komplementami z twórcą aplikacji internetowej @ ana108.