Stylie - Darmowy kreator animacji internetowych CSS
Jeśli zmagasz się ze składnią CSS3 i chcesz prosty sposób tworzenia animacji Stylie to świetne narzędzie do oszczędzania.
To jeden z wielu darmowych generatory kodu z naciskiem na czyste efekty animowane CSS. Stylie jest całkowicie darmowy i otwarty, hostowany na GitHub i zasilany przez bibliotekę klatek kluczowych o nazwie Rekapi.
Biblioteka Rekapi używa JavaScript, więc jest to alternatywa dla czystego CSS. I na szczęście aplikacja internetowa Stylie obsługuje obie metody, więc możesz eksportuj kod w czystym CSS lub JavaScript.
Domyślnie pierwsza strona ładuje ciągłe demo animacji z animacją liniową. Możesz się tym bawić, edytując Ustawienia domyślne w Karta Ruch lub edytując Karta Klatki kluczowe.
Na liście klatek kluczowych możesz dodaj nowe klatki kluczowe, edytuj ich całkowity czas trwania, i zmień style animacji, w tym ruchy oparte na osi X / Y.
Po pierwsze, to będzie wyglądać bardzo mylące, szczególnie jeśli nigdy wcześniej nie zrobiłeś animacji klatek kluczowych. Jednak im więcej grasz z tą aplikacją, tym bardziej ma to sens.
Domyślnie będziesz mieć mnóstwo różne opcje luzowania aby zepsuć i wszystkie są bardzo łatwe do dostosowania.
The Wykres ruchu jest trudniejszy do opanowania, ale daje znacznie większą kontrolę nad łagodzeniem animacji. Stylie pozwala ci nawet zapisz niestandardowe efekty ruchu i używaj ponownie w zakładce Klatki kluczowe dla innych animacji.
Gdybym mógł narzekać na jedną rzecz, to aplikacja internetowa brak responsywnego projektu.
Nie mogłem dopasować całej aplikacji do ekranu 13-calowego MacBooka Pro, nawet gdy przeglądarka była w pełni zmaksymalizowana. Może to stanowić problem, ponieważ strona nie ma pionowego paska przewijania, a wiele opcji (takich jak wyeksportowany kod) znajduje się niżej w okienku ustawień.
Ale pomijając tę drobną irytację, sprawiłem, że działa dobrze na moim większym monitorze. I jakość eksportu jest niczym innym, co znajdziesz w sieci.
Rzuć okiem na aplikację Stylie, aby zobaczyć, jak działa i spróbuj zagrać z niektórymi opcjami. Po zrobieniu animacji możesz wyeksportuj CSS lub JavaScript i używaj tego do dowolnego projektu.
Jeśli masz problemy z nauką interfejsu, możesz również obejrzeć ten krótki tutorial obejmujący około 9 minut i obejmujący wszystkie najważniejsze funkcje.
