10 CSS3 Animacja Narzędzia, które powinieneś zaznaczyć
Ponieważ ludzie mają tendencję do łatwiejszego dostrzegania rzeczy, które się poruszają, inteligentnie używane animacje mogą poprawić wrażenia użytkownika na stronie zwracając uwagę na ważne elementy, które użytkownicy muszą szybko zauważyć.
CSS3 wprowadził nową składnię animacji, która może pomóc w osiągnięciu wielu interesujących rzeczy w projektach. Budowanie fajnych animacji może być czasem skomplikowane i czasochłonne, to znaczy, kiedy biblioteki animacji i generatory mogą być doskonale używane.
Sprawdź niektóre animacje możliwe dzięki CSS:
- 38 Inspirujące demonstracje animacji CSS3
- 15 Piękne efekty tekstowe Utworzone za pomocą CSS
- 30 fajnych animacji CSS, które musisz zobaczyć
- Jak utworzyć efekt odbicia za pomocą animacji CSS3
W tym poście przyjrzymy się 10 genialnym narzędziom, które mogą ułatwić i przyspieszyć tworzenie własnych animacji.
1. Generator animacji CSS3Gen CSS3
CSS3Gen zapewnia łatwy w użyciu generator animacji, który umożliwia szybkie generowanie podstawowych animacji. Mimo że za pomocą tego narzędzia nie będziesz tworzyć skomplikowanych dzieł sztuki, to świetny wybór, jeśli chcesz stworzyć standardową animację bez zbytniego zamieszania.
ty nie musisz brudzić rąk kodem, ponieważ możesz ustawić właściwości na formularzu, wyświetlić podgląd wyniku, a następnie po prostu skopiować i wkleić kod do własnego pliku CSS.
2. CSS Animate
Jeśli ty potrzebujesz bardziej skomplikowanych animacji, możesz znaleźć CSS Animate przydatny. Ma bardziej dojrzały interfejs użytkownika, można ustawić nieco więcej właściwości i można śledzić, zatrzymywać i ponownie uruchamiać animację za pomocą intuicyjnej osi czasu.
Istnieją również przykładowe animacje, takie jak “Odbić się”, “Wstrząsać”, i “Huśtawka”, można załadować do generatora i zmodyfikować kod zgodnie z własnymi potrzebami.
3. Coveloping CSS Animation Generator
CovelopingGenerator animacji jest prawdopodobnie najlepszym wyborem jeśli jesteś nowy z animacjami CSS3, i chcesz szybko zrozumieć, jak działają. To proste, ale potężne narzędzie pozwala przetestować różne typy animacji, które CSS3 ma do zaoferowania, i łatwo sprawdzić, jaka jest między nimi różnica.
Musisz tylko ustawić 4 parametry: typ animacji, funkcję animacji, czas trwania w sekundach i czy animacja jest nieskończona. Kiedy będziesz gotowy, musisz tylko pobrać i pobrać wygenerowany kod HTML i CSS.
4. Magiczne animacje
Magiczne animacje to fajna biblioteka CSS, która umożliwia łatwo umieszczaj animacje z efektami specjalnymi na twojej stronie. Na przykład możesz sprawić, że elementy znikną i znikną, otworzą się w lewo lub w prawo, a następnie powrócą, obrócą w dół, w górę, w lewo lub w prawo i wiele innych
Wszystko, co musisz zrobić, to pobrać kod, dołączyć plik CSS do strony HTML i dodać odpowiednią klasę za pomocą jQuery w następujący sposób:
$ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn');); Możesz także zmienić ustawienia timera i uczynić animację nieskończoną za pomocą jQuery (więcej szczegółów znajdziesz w pliku readme).
5. Animate.css
Animate.css zapewnia zestaw fajne animacje CSS3 w różnych przeglądarkach. Animacje są podzielone na grupy, takie jak Poszukiwacze Uwagi, Odskakujące Wejścia, Odbijające Wyjścia, Fading Entrances i wiele innych, więc naprawdę nie możesz narzekać na brak wyboru.
Możesz pobrać kod z Github, wystarczy dodać plik CSS do strony HTML i odpowiednie klasy CSS do elementów HTML, które chcesz animować.
6. Bounce.js
Bounce.js to przydatna biblioteka JavaScript, która umożliwia tworzyć skomplikowane animacje. Bounce.js ma dojrzały interfejs użytkownika, który pozwala na dodanie różnych komponentów - takich jak rozluźnienie, czas trwania, opóźnienie i liczba odbić - ręcznie do animacji, lub wybierz gotowe do użycia ustawienie, a następnie odtwórz animację, i dostosuj właściwości, jeśli jest to konieczne.
7. AniJS
AniJS to biblioteka supercool JavaScript, która pozwala dodawać animacje CSS3 do swoich projektów i do buduj zaawansowane komponenty interfejsu użytkownika takie jak animowane karty, akordeony, moduły, przesuwane menu, powiadomienia o aplikacjach mobilnych, odsłonięcia i wiele innych.
Współpracuje ze wszystkimi nowoczesnymi przeglądarkami, w tym iOS i Android, nie wymaga żadnych bibliotek zewnętrznych i ma spektakularną wizytówkę o nazwie AniCollection, w której można łatwo eksperymentować z różnymi efektami zapewnianymi przez bibliotekę.
8. Błystki CSS z pojedynczym elementem
Czy kiedykolwiek chciałeś ulepszyć swoje projekty animowane ładujące spinningi? Jeśli odpowiedź brzmi tak, ta urocza biblioteka spinnerów CSS może być doskonałym wyborem dla Ciebie. Kod CSS dla spinnerów jest napisany LESS. Nie ma żadnych ustawień, kod jest gotowy, wystarczy wstawić go do własnych plików HTML i CSS.
9. Licznik kilometrów
Drogomierz to wspaniałe narzędzie do umieść fajne animowane metry na swojej stronie. Jest to biblioteka CSS i JavaScript, część CSS jest napisana w Sassie i możesz wybierać spośród różnych tematów, takich jak “Cyfrowy”, “Dworzec kolejowy”, i “Samochód”.
Aby korzystać z licznika kilometrów, musisz dodać plik JavaScript i wybrany plik motywu do strony HTML, a następnie class = "licznik kilometrów" selektor do elementu, który chcesz przekształcić w animowany miernik. Idealny wybór do wizualnego przedstawiania danych lub do tworzenia danych “Wkrótce” strona bardziej przyciągająca wzrok.
10. Snabbt.js
Snabbt.js to minimalistyczna biblioteka animacji pomaga łatwo przenosić rzeczy. Jeśli potrzebujesz trochę inspiracji, spójrz na prezentacje, aby zobaczyć, co możesz osiągnąć dzięki temu inteligentnemu narzędziu do animacji, animowany układ okresowy na poniższym zrzucie ekranu to tylko jedna z wielu możliwości, które Snabbt.js ułatwia implementację.
Jeśli chcesz korzystać z tej biblioteki, musisz napisać trochę JavaScript, ale wynik jest dość spektakularny, więc prawdopodobnie warto.
