Animate.css istnieje już od kilku lat i muszę przyznać, że spóźniłem się na przyjęcie. Odkryłem to dopiero kilka miesięcy temu, szukając w sieci samouczków dotyczących animacji CSS i znalazłem najszybszy i najprostszy sposób na animację w okolicy, Animate.css.
Stworzony przez faceta o imieniu Dan Eden, Animate.css to szybki sposób, aby zobaczyć, jak działa CCS i uzyskać akcję animacyjną na swojej stronie.
Opisany jako „Just-add water CSS animation” Animate.css jest trochę zabawny z poważną stroną. Pozwala nawet amatorskim projektantom stron internetowych, takim jak ja, na szybkie zapoznanie się z podstawami animacji CSS i tworzenie prostych, ale skutecznych efektów dla stron internetowych. To narzędzie potrafi to zrobić, od pojedynczego animowanego nagłówka po bardziej zaangażowane ruchy.
Animate.css
Animate.css jest dostępny do pobrania z GitHub i jest zasadniczo biblioteką prostych efektów CSS zebranych w jednym miejscu. Każda animacja jest ładnie zapakowana i gotowa do użycia. Wszystko, co musisz zrobić, to znaleźć animację, którą lubisz i zastosować klasę. To wszystko w związku z tym.
Nie musisz pobierać całej biblioteki, jeśli nie chcesz, ponieważ zawiera ona 2500 wierszy kodu. Możesz odwiedzić witrynę Animate.css, znaleźć animację i kliknąć link Pobierz Animate.css. Ładuje klasę na stronę internetową, abyś mógł ją skopiować i używać według własnego uznania.
Łatwiej jest jednak używać GitHub i przechodzić do szczegółów, aby znaleźć efekt, którego szukasz.
- Przejdź do strony GitHub css.
- Kliknij link Źródło, aby uzyskać dostęp do listy elementów.
- Wybierz typ efektu, którego szukasz z listy. Odbicie przyciąga uwagę, więc wybierz link
- Wybierz bounce.css.
- Skopiuj kod i umieść go na swojej stronie, aby zastosować animację.
To naprawdę jest takie proste. Oczywiście wybrałbyś różne opcje dla różnych efektów, ale wynik końcowy jest taki sam. Dostęp do kodu niezbędnego do ciężkiego podnoszenia na stronie.
Budowanie animowanego obiektu za pomocą Animate.css
Budowanie czegoś fajnego z Animate.css jest proste. To tylko kwestia znalezienia kodu CCS i dodania go do własnego CSS. Jeśli mogę to zrobić, każdy może!
Pierwsza opcja na stronie Animate.css jest odrzucona, więc skorzystajmy z tego w tym przykładzie.
- Wklej ” ' wewnątrz w twoim arkuszu stylów.
- Znajdź CSS dla animacji, którą chcesz i dodaj ją do elementu, który chcesz animować. Na przykład dodaj „ ”, aby dodać efekt odbicia do testu, obrazu lub cokolwiek innego.
- Dodaj następujący kod CSS, aby wszystko działało. Zaczerpnięte z bounce.css powyżej.
@keyframes bounce {
od, 20%, 53%, 80%, do {
funkcja synchronizacji animacji: sześcienna beziera (0.215, 0.610, 0.355, 1.000);
transform: translate3d (0, 0, 0);
}
40%, 43% {
funkcja synchronizacji animacji: sześcienna beziera (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -30px, 0);
}
70% {
funkcja synchronizacji animacji: sześcienna beziera (0, 755, 0, 050, 0, 855, 0, 060);
transform: translate3d (0, -15px, 0);
}
90% {
transform: translate3d (0, -4px, 0);
}
}
.odbić się {
nazwa-animacji: odbicie;
transform-origin: środkowy dół;
}
Kontynuacja animacji dzięki Animate.css
Powyższa sekwencja dodaje efekt odbicia, gdy strona ładuje się po raz pierwszy, co jest fajne, ale jednorazowe. Może dodamy go do aktywowania. W ten sposób, gdy ktoś unosi kursor nad testem, odbija się. Nie jest to coś, co zrobiłbym na stronie produkcyjnej, ale to świetny sposób, aby pokazać, jak wszystko działa.
Dodaj następujący kod do swojego CSS, aby dodać efekt odbicia po najechaniu myszą. Za każdym razem, gdy mysz znajdzie się nad elementem, powinna się odbić.
.animated: hover {
-webkit-animacja-czas trwania: 1s;
-moz-animacja-czas trwania: 1s;
-ms-animacja-czas trwania: 1s;
-o-animacja-czas trwania: 1s;
czas trwania animacji: 1s;
-webkit-animation-fill-mode: oba;
-moz-animation-fill-mode: oba;
-ms-animation-fill-mode: oba;
-o-animacja-tryb wypełnienia: oba;
tryb wypełnienia animacji: oba;
}
Jeśli znasz CSS, będziesz wiedział znacznie lepiej niż ja o tym, jak wdrażać różne efekty dla różnych działań. Jako początkujący, to i biblioteki dostarczone w Animate.css pomagają mi tworzyć podstawowe, ale skuteczne animacje dla moich stron internetowych.
Nie wiem, ile bym użył w witrynie na żywo, ponieważ nie zawsze wypadają zbyt dobrze, a użytkownicy mobilni wcale ich nie lubią. Jednak jako lekcja na temat działania CSS i tego, jak można go wykorzystać do ulepszenia sieci, jest to świetny zasób. Jestem tylko początkującym, ale nawet spędzanie kilku godzin z Animate.css na tym samouczku wiele mnie nauczyło. Myślę, że jeszcze się z tym pobawię, zanim skończę. Jak o tobie?
