Dziewięć prostych przykładów animacji CSS3. Dziewięć prostych przykładów rozmycia animacji CSS3 w CSS

Ta kolekcja zawiera najlepsze i najwyższej jakości funkcje CSS. Tutaj znajdziesz różne i niesamowite przykłady demonstracyjne i techniki od znanych projektantów układów i projektantów, którzy próbują udowodnić, że obecnie można zrobić prawie wszystko, używając wyłącznie czystego CSS. Znajdziesz tu również kilka lekcji, które szczegółowo opowiedzą Ci, jak wykonać takie dzieło. Mam nadzieję, że ta kolekcja będzie dla Was przydatna.

Chmury CSS 3D

W tym demo będziesz mógł tworzyć i edytować fantazyjne chmury w 3D. Te chmury CSS uświadamiają nam, że możliwości technologii internetowych są niemal nieograniczone.

Czyste logo CSS

Oto przykłady logo wykonanych wyłącznie przy użyciu czystego CSS. Pomyśl o tym, przy jego tworzeniu nie użyto żadnych obrazów. To po prostu coś.

Alfabet z animacją CSS

Doskonałe i przykład artystyczny używając CSS w alfabecie

Nawigacja 3D dla serwisu

Proste, ale bardzo stylowy panel nawigacja dla serwisu, oczywiście wykonana przy użyciu wyłącznie CSS3. żadnych obrazów ani skryptów.

Google Doodle z CSS

Jeden z wielu bazgrołów z wyszukiwarki Google, wykonany w CSS. To świetny przykład dobrego wykorzystania animacji CSS.

Suwak

Dobrze wykonany i wysokiej jakości slider obrazu. Plus 4 przykłady w wersji demonstracyjnej.

Podwójny animowany pierścień

Piękny animowany i wielokolorowy pierścień z niewielką ilością kodu CSS

Rozmycie w CSS

Wydaje mi się, że bardzo wymagany filtr, zwłaszcza, że jest wykonany w czystym CSS. Za pomocą rozmycia możesz zwrócić uwagę użytkownika na określony punkt.

Kompletny przewodnik po Flexboxie

Ten artykuł dotyczy responsywnych bloków Flexbox. Mówi całkowicie o tych blokach, chociaż artykuł jest w języku angielskim.

Kolorowe i animowane menu w CSS3

Piękne rozwijane menu dla strony internetowej z ikonami. Ogromnym plusem jest to, że jest wykonany w całości w CSS.

Filtry CSS

Wysokiej jakości materiał w języku angielskim, który mówi o stosowaniu filtrów CSS na obrazach.

Formularze CSS

Post o formularzach CSS z licznymi przykładami

Paski postępu w CSS

Lekcja na temat tworzenia stylowych pasków postępu przy użyciu czystego CSS i animacji. Możesz także zobaczyć przykład i pobrać źródła.

Animacja — Animate.css

Najpopularniejszy obecnie projekt animacji CSS w Internecie. I prawdopodobnie najprostsza i najwyższa jakość, a także bezpłatna.

W tym artykule będziemy kontynuować badanie niuansów korzystania z animacji, przestudiujemy takie funkcje CSS, jak wstrzymywanie animacji, kierunek animacji, przyjrzymy się, jak określić styl elementu, gdy animacja nie jest odtwarzana, przyjrzymy się jak poprawnie wykorzystać uniwersalną właściwość do tworzenia animacji, połączymy się i nauczymy, jak korzystać z biblioteki Animacja.css .

Zwracam uwagę na fakt, że do przestudiowania tego materiału będziesz potrzebować wiedzy, którą musisz zdobyć w poprzednim artykule „”.

Stan animacji

Następną prostą właściwością, której się przyjrzymy, jest animacja-play-state, która definiuje stan animacji. Do tej właściwości przekazywany jest jeden z dwóch możliwych słów kluczowych:

biegnie - odtwarzana jest animacja (wartość domyślna).
wstrzymana - animacja jest wstrzymana.

Wstrzymaj i rozpocznij animację .test (szerokość: 100px ; /* szerokość elementu */ wysokość: 100px ; /* wysokość elementu */ kolor: biały ; /* kolor czcionki biały */ tło: zielony ; /* kolor tła */ pozycja : względny ; /* element z względnym położeniem */ nazwa-animacji: iliketomoveit ; /* nazwa animacji */ czas trwania animacji: 5s ; /* czas trwania animacji */ liczba iteracji animacji: nieskończona powtarzalność */ animacja-play- ; stan: uruchomiony ; /* odtwarzanie animacji (domyślnie) */ .test:hover ( stan odtwarzania animacji: wstrzymana ; /* wskazuje, że animacja zostaje wstrzymana, gdy wskaźnik myszy najedzie na element */ ) @keyframes iliketomoveit ( 0% ( po lewej : 0px ;) /* początek cyklu animacji */ 25% ( po lewej : 400px ;) /* 25% czasu trwania animacji */ 75% ( po lewej : 200px ;) /* 75% czasu trwania animacji */ 100 % (po lewej: 0px ;) /* koniec pętli animacji */ ) wskaż na mnie

W tym przykładzie, który stworzyliśmy prosta animacja, w którym z za pomocą CSS left właściwości przesuwają element względnym położeniem względem lewej krawędzi bieżącej pozycji.

Po najechaniu kursorem myszy na element (pseudoklasa :hover()) animacja zostaje wstrzymana poprzez ustawienie właściwości animacji-play-state na pauded , a animacja zostaje wznowiona, gdy kursor opuści element.

Wynik naszego przykładu:

Kierunek animacji

Korzystając z ogólnej właściwości animacji, określiliśmy następujące parametry animacji:

Nazwa animacji- lubię się poruszać.
Czas trwania animacji- 4 sekundy.
Krzywa prędkości- kroki animacji kroków (3, start). Dla każdej części klatki kluczowej zostanie ona wyprodukowana 3 kroki.
Opóźnienie animacji- 500 milisekund.
Liczba cykli- nieskończony (nieskończony).
Kierunek animacji- bieg wsteczny (w przeciwnym kierunku).

Wynik naszego przykładu:

Rozważmy następujący przykład, w którym

Ładowanie animacji na treść CSS ( margines : 0 ; /* dopełnienie */ dopełnienie : 0 ; /* dopełnienie */ ) .container ( szerokość : 100px ; /* szerokość elementu */ dopełnienie-top: 100px ; /* dopełnienie u góry */ margines: 0 auto ; /* wyśrodkuj element z zewnętrznymi marginesami */ ) div > div ( display : inline-block ; /* ustaw zagnieżdżone elementy jako linię blokową (w linii) */ szerokość: 10px ; /* szerokość elementu */ wysokość: 10px; /* wysokość elementu */ margines: 0 auto ; /* wyśrodkuj elementy z marginesami zewnętrznymi */ border-radius: 50px ; /* określ kształt narożników */ .item:nth-child( 1) ( tło: pomarańczowe ; /* kolor tła */ animacja: w górę 1 s liniowa 1 s nieskończona ; .item:nth-child(2) ( tło: fioletowe ; /* kolor tła */ animacja: w górę 1 s liniowa 1,2 s nieskończona ; /* nazwa czas trwania funkcja czasowa opóźnienie liczba iteracji */ ) .item:nth-child(3) ( tło: magenta ; /* kolor tła */ animacja: w górę 1 s liniowa 1,4 s nieskończona; /* nazwa czas trwania funkcji opóźnienia liczba iteracji */ ) .item:nth-child(4) ( tło : jasnozielony ; /* kolor tła */ animacja : w górę 1 s liniowa 1,6 s nieskończona ; /* nazwa czas trwania funkcja synchronizacji liczba iteracji opóźnienia */ ) .item:nth-child(5) ( tło : las zielony ; /* kolor tła */ animacja : w górę 1 s liniowa 1,8 s nieskończona ; /* nazwa czas trwania funkcja czasowa opóźnienie liczba iteracji * / ) @keyframes up ( 0%, 100% ( /* początek i koniec pętli animacji */ transform : TranslationY(-15px) ; /* przesunięcie elementu wzdłuż osi Y */ ) 50% ( /* środek animacji */ transform : tłumacz(5px, 0) ; /* przesuń element o 5 pikseli wzdłuż osi X, bez przesunięcia wzdłuż osi Y */ ) )

W tym przykładzie stworzyliśmy kilka animacji, w których za pomocą właściwości zagnieżdżone elementy przesuwane są wzdłuż osi X(oś pozioma) i oś Y (oś pionowa). Każdy element miał inne opóźnienie animacji, wahające się od 1 sekundy do 1,8 sekundy. Każda animacja elementu zawiera następujące parametry:

Nazwa animacji-w górę.
Czas trwania animacji- 1 sekunda.
Krzywa prędkości- liniowy (ta sama prędkość przez całą animację).
Opóźnienie animacji- od 1 sekundy do 1,8 sekundy.
Liczba cykli- nieskończony (nieskończony).

Przyjrzyjmy się prostej animacji z biblioteki zmieniającej przezroczystość elementu:

@keyframes fadeIn ( od ( /* początek cyklu animacji (tak samo jak 0%) */ opacity : 0 ; /* element jest całkowicie przezroczysty */ ) do ( /* koniec cyklu animacji (tak samo jak 100%) * / opacity: 1 ; /* element jest nieprzezroczysty */ ) .fadeIn (nazwa-animacji: fadeIn ; /* nazwa animacji (odpowiada nazwie w regule @keyframes) */ )

Te klatki kluczowe korzystają z właściwości umożliwiającej zmianę przezroczystości elementu z całkowicie przezroczystego na nieprzezroczysty.

Ale to jeszcze nie wystarczy, aby uruchomić animację interesującej Cię biblioteki Animate.css. W celu uruchomienia animacji możesz, ale nie musisz, skorzystać z klas stworzonych przez autora projektu:

/* klasa bazowa, która pozwala na uruchomienie animacji przez jeden cykl */ .animated ( czas trwania animacji : 1 s ; /* czas trwania animacji 1 sekunda */ tryb wypełnienia animacji : oba ; /* ustawia styl elementu, gdy animacja nie jest odtwarzana (po zakończeniu animacji, a przed jej rozpoczęciem - w czasie opóźnienia).*/ ) /* dodanie klasy .infinite do elementu, który ma ustawioną klasę .animated, umożliwi odtwarzanie animacji w nieskończoność */ .animated.infinite ( liczba iteracji animacji : nieskończona ; /* animacja będzie odtwarzana bez końca */ )

Pamiętaj, że możesz stworzyć własne klasy, które będą kontrolować proces animacji. Z reguły dodawanie klas do tego lub innego elementu odbywa się za pomocą języka JavaScript w zależności od działań użytkownika lub określonych zdarzeń. Przyjrzymy się przykładowi, w którym wykorzystamy wyłącznie klasy z biblioteki Animate.css i zainstalujemy animację wyłącznie przy użyciu kaskadowych arkuszy stylów.

Spójrzmy na przykład:

Animacja z wykorzystaniem biblioteki Animate.CSS

W tym przykładzie połączyliśmy bibliotekę Animate.css za pomocą tagu i umieściliśmy obraz, do którego połączyliśmy (określone oddzielonymi spacją) kolejne 3 klasy z biblioteki.

W ciągu ostatnich kilku lat CSS wprowadził wiele interesujących funkcji, dzięki którym tworzenie stron internetowych staje się przyjemniejsze. Jedną z tych rzeczy jest animacja CSS3. Przed CSS3 animację można było implementować wyłącznie przy użyciu JavaScript.

Dziś pokażemy Ci jak pracować z biblioteką CSS3, która sprawi, że tworzenie animacji stanie się przyjemnym i łatwym procesem: Animate.css.

Animate.css to biblioteka do tworzenia animacji przy użyciu CSS3. Ta biblioteka obsługuje ponad 50 różnych efektów animacji, z których prawie wszystkie działają w różnych przeglądarkach, obsługiwanych przez CSS3.

Efekty te można zastosować do tekstu, obrazów, kształtów i tak dalej.

Zacznijmy

Aby aktywować Animate.css, połącz niezbędne klasy z elementem strony. Aby rozpocząć, umieść plik animate.css w sekcji head. Bibliotekę można pobrać z repozytorium na Githubie.

Domyślnie plik Animate.css odtwarza animację raz po załadowaniu strony. Aby animacja odtwarzała się cyklicznie, dodajmy trochę JavaScriptu.

... ...

HTML

Po pierwsze, wymagany element musimy przypisać klasę class.animated, a następnie klasę typu animacji.

Ten tekst będzie animowany.

To wszystko! Teraz animacja będzie odtwarzana po załadowaniu strony. Dodajmy JavaScript, aby odtworzyć animację po uruchomieniu zdarzenia. Klasa.option jest całkowicie dowolna, możesz ją zmienić tak, aby Ci odpowiadała.

Dodatkowe ustawienia CSS

Jeśli chcemy, aby animacja się nie zatrzymywała lub czas jej wykonania był inny, musimy dostosować pewne wartości.

Aby przewinąć animację n-tą lub nieskończoną liczbę razy, możemy dostosować atrybut animacji-iteracji-liczby. Nie zapomnij podać prefiksu przeglądarki dla webkit, moz itp. Aby przewijać w nieskończoność, ustaw wartość na nieskończoną.

Jeśli musimy odtworzyć animację określoną liczbę razy, możesz to zrobić w ten sposób.

Liczba iteracji animacji dostawcy: nieskończona | ;

Aby zmienić czas odtwarzania, możesz dostosować właściwości czasu trwania animacji i opóźnienia animacji. Przykład:

Opcja ( -webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 5; )

JavaScript

Aby animować podczas jakiegoś zdarzenia (na przykład po kliknięciu), użyjemy JavaScript. Najpierw dodajmy link.

Ten tekst będzie animowany. Kliknij, aby animować!

Wykorzystując Javascript możemy stworzyć funkcję animate, której przekażemy nazwę klasy animacji:

$(funkcja() ( $("#ref").click(funkcja() ( animate(.demo", "odbicie"); return false; )); ));

Najprostszy przykład użycia tej kombinacji można zobaczyć tuż poniżej na tej stronie. Najciekawsze jest to, że to piękno (animacja przewijania) działa BEZ jQuery. Okazuje się, że dla tego skryptu wszystkie drzwi są otwarte...I jako przykład przewiń w dół...Bądź odważny...

Mogę z całą pewnością powiedzieć, że teraz animacja przewijania staje się BARDZO popularna i ten efekt Często na stronach sprzedających można spotkać odnoszących sukcesy przedsiębiorców internetowych. Takie „sztuczki” BARDZO ożywiają strony i pomagają skupić na nich uwagę odwiedzającego ważne punkty, które chcesz, aby zostały zauważone jako pierwsze.

Animacja przewijania: kombinacja
„WOW.js” i „Animacja.css”
na WordPressie...

* aby powtórzyć animację, przeładuj stronę.

Jak to skonfigurować?

KROK 1
Aby rozpocząć, pobierz te dwa pliki („WOW.js” i „Animate.css”)

AKTUALIZACJA (25 lipca 2019):
wow.min.js v1.2.1 | animate.min.css v3.7.2
KROK 2
Umieść folder „wow-animation” w folderze głównym witryny. Oczywiście możesz umieścić go w dowolnym miejscu, pod warunkiem, że określisz poprawną ścieżkę do plików. Nadal wskazane jest umieszczenie tego folderu w folderze głównym: indeks.html. Jeśli to WordPress, umieść folder w dowolnym miejscu. (najważniejsze jest wskazanie prawidłowej ścieżki do niego).

KROK 3
Wstawiamy do tej linijki:

* Oczywiście wskazujemy poprawną ścieżkę do pliku. Jeśli instalujesz na WordPressie, polecam podać pełną ścieżkę, tj. zaczynając od httpS://TwojaDomena itp. Aby sprawdzić, czy poprawnie podłączyłeś plik, skopiuj adres URL, wpisz go w pasku adresu i naciśnij Enter. Jeśli otworzy się plik z niezrozumiałym kodem, to wszystko jest w porządku :)

KROK 4
Umieść te linie na samym dole strony:

nowy WOW().init();

* Podaj także poprawną ścieżkę do pliku i sprawdź w przeglądarce.

Pewne informacje

KROK 6
Ustawienia zaawansowane. Dodawanie funkcji:
data-wow-duration : Zmień czas trwania animacji;
data-wow-delay : Opóźnienie przed rozpoczęciem animacji;
data-wow-offset : Odległość przed rozpoczęciem animacji (względem dołu okna przeglądarki);
data-wow-iteration : Powtórz animację „tyle razy”.

Pewne informacje Pewne informacje

| 18.02.2016

Otwiera się CSS3 nieograniczone możliwości dla projektantów UI, a główną zaletą jest to, że prawie każdy pomysł można łatwo wdrożyć i wcielić w życie bez uciekania się do użycia JavaScript.

To niesamowite, jak proste rzeczy mogą ożywić zwykłą stronę internetową i uczynić ją bardziej dostępną dla użytkowników. Mówimy o przejściach CSS3, za pomocą których można pozwolić elementowi na transformację i zmianę stylu, na przykład po najechaniu myszką. Dziewięć przykładów animacji CSS3 dostępnych poniżej pomoże Ci stworzyć responsywną atmosferę na Twojej stronie, a także ją ulepszyć widok ogólny stron dzięki pięknym płynnym przejśćom.

Aby uzyskać bardziej szczegółowe informacje, możesz pobrać archiwum z plikami.

Wszystkie efekty działają przy użyciu właściwości przejścia. przemiana- „przejście”, „transformacja”) oraz pseudoklasa:hover, która określa styl elementu po najechaniu na niego kursorem myszy (w naszym tutorialu). W naszych przykładach użyliśmy elementu div o wymiarach 500 x 309 pikseli, początkowego koloru tła #6d6d6d i czasu przejścia wynoszącego 0,3 sekundy.

Body > div ( szerokość: 500 pikseli; wysokość: 309 pikseli; tło: #6d6d6d; -webkit-przejście: wszystkie ułatwienia 0,3 s;; -moz-przejście: wszystkie ułatwienia 0,3 s;; -o-przejście: wszystkie ułatwienia 0,3 s;; przejście: wszystkie 0,3 s łatwości)

1. Zmień kolor po najechaniu myszką

Dawno, dawno temu wdrożenie takiego efektu było dość żmudną pracą, wymagającą matematycznych obliczeń określonych wartości RGB. Teraz wystarczy napisać styl CSS, w którym należy dodać pseudoklasę:hover do selektora i ustawić kolor tła, który po najechaniu myszką na blok płynnie (w 0,3 sekundy) zastąpi oryginalny kolor tła:

Kolor: najechanie (tło:#53ea93;)

2. Wygląd ramy

Ciekawą i efektowną transformacją jest wewnętrzna ramka, która płynnie pojawia się po najechaniu myszką. Świetnie nadaje się do ozdabiania różnych guzików. Aby uzyskać taki efekt używamy pseudoklasy:hover oraz właściwości box-shadow z parametrem inset (ustawia cień wewnątrz elementu). Dodatkowo będziesz musiał ustawić rozciągnięcie cienia (w naszym przypadku jest to 23px) i jego kolor:

Obramowanie: najechanie (box-shadow: wstawka 0 0 0 23px #53ea93; )

3. Huśtaj się

Ta animacja CSS jest wyjątkiem, ponieważ właściwość przejścia nie jest tutaj używana. Zamiast tego użyliśmy:

@keyframes to podstawowa dyrektywa służąca do tworzenia animacji CSS klatka po klatce, która pozwala na wykonanie tzw. scenorys i opisz animację jako listę kluczowych punktów;
animacja i animacja-iteration-count - właściwości umożliwiające ustawienie parametrów animacji (czas trwania i prędkość) oraz liczby cykli (powtórzeń). W naszym przypadku powtórz 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: tłumaczX(9px); transform: tłumaczX(9px); ) 30% ( -webkit-transform: tłumaczX(-9px); transformacja: tłumaczX(-9px); ) 40% ( -webkit-transform: tłumaczX(6px); transform: tłumaczX(6px); ) 50% ( -webkit-transform: tłumaczX(-6px); transform: tłumaczX(-6px); ) 65% ( -webkit -transform: tłumaczenieX(3px); transformacja: tłumaczenieX(3px) 100% ( -webkit-transform: tłumaczenieX(0); transformacja: tłumaczenieX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: tłumaczenieX( 9px); przekształcenie: tłumaczenieX(9px); ) 30% ( -webkit-transform: tłumaczenieX(-9px); przekształcenie: tłumaczenieX(-9px); ) 40% ( -webkit-transform: tłumaczenieX(6px); przekształcenie: tłumaczenieX (6px); ) 50% ( -webkit-transform: tłumaczX(-6px); transformacja: tłumaczX(-6px); ) 65% ( -webkit-transform: tłumaczX(3px); transformacja: tłumaczX(3px); ) 100 % ( -webkit-transform: tłumaczX(0); transform: tłumaczX(0); ) ) .swing:hover ( -webkit-animation: łatwość swingu 0,6 s;

animacja: łatwość zamachu 0,6 s;

-liczba iteracji animacji webkit: 1;

liczba iteracji animacji: 1; ) 4. Tłumienie

Efekt zanikania to w zasadzie prosta zmiana przezroczystości elementu. Animacja tworzona jest w dwóch etapach: najpierw należy ustawić początkowy stan przezroczystości na 1 – czyli całkowite krycie, a następnie określić jego wartość po najechaniu myszką – 0,6:

Zanikanie ( krycie: 1; ) .fade:hover ( krycie: 0,6; )

Aby uzyskać odwrotny wynik, zamień wartości:

5. Powiększenie

Aby powiększyć blok po najechaniu myszą, użyjemy właściwości transform i ustawimy ją na Scale(1.2) . W takim przypadku blok wzrośnie o 20 procent, zachowując swoje proporcje:

Grow:hover ( -webkit-transform: skala (1.2); -ms-transform: skala (1.2); transformacja: skala (1.2); )

6. Redukcja

Zmniejszenie elementu jest tak samo proste, jak jego powiększenie. Jeśli w piątym akapicie, aby zwiększyć skalę, musieliśmy podać wartość większą niż 1, to aby zmniejszyć blok, po prostu określimy wartość, która będzie mniejsza niż jeden, na przykład skala(0.7) . Teraz, po najechaniu myszką, blok zmniejszy się proporcjonalnie o 30 procent swojego pierwotnego rozmiaru: Zmniejsz: najedź ( -webkit-transform: skala (0,7); -ms-transform: skala (0,7); transformacja: skala (0,7); ), który po najechaniu kursorem zmienia się w okrąg. Używając właściwości CSS border-radius, używanej w połączeniu z :hover i przejście, można to osiągnąć bez problemów:

Okrąg: najechanie (promień obramowania: 70%; )

8. Rotacja

Zabawną opcją animacji jest obrócenie elementu o określoną liczbę stopni. Aby to zrobić, będziemy potrzebować ponownie właściwości transform, ale z inną wartością - obróćZ(20deg) . Przy tych parametrach blok zostanie obrócony o 20 stopni w kierunku zgodnym z ruchem wskazówek zegara względem osi Z:

Obróć: najedź ( -webkit-transform: obróć Z (20 stopni); -ms-transform: obróć Z (20 stopni); przekształć: obróć Z (20 stopni); )

9. Cień 3D

Zdania projektantów są podzielone co do tego, czy efekt ten jest odpowiedni w przypadku płaskiej konstrukcji. Jednak ta animacja CSS3 jest dość oryginalna i jest również używana na stronach internetowych. Efekt trójwymiarowości uzyskamy wykorzystując znane już właściwości box-shadow (stworzymy cień wielowarstwowy) i przekształcimy za pomocą parametru TranslationX(-7px) (zapewnimy poziome przesunięcie bloku w lewo o 7 pikseli ):

Threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: tłumaczX( -7px); przekształcenie: tłumaczenieX(-7px)

Obsługa przeglądarki

Następujące przeglądarki obsługują obecnie właściwość przejścia:

Przeglądarki komputerowe

Internet Explorera	Obsługiwane przez IE 10 i nowsze wersje
Chrom	Obsługiwane od wersji 26 (do wersji 25, która będzie działać z przedrostkiem -webkit-)
Firefoksa	Obsługiwane od wersji 16 (w wersjach 4-15 działa z przedrostkiem -moz-)
Opera	Obsługiwane od wersji 12.1
Safari	Obsługiwane od wersji 6.1 (w wersjach 3.1-6 działa z przedrostkiem -webkit-)

Pozostałe właściwości użyte w tych przykładach, takie jak transform, box-shadow itp., są również obsługiwane przez prawie wszystkie nowoczesne przeglądarki. Jeśli jednak zamierzasz wykorzystać te pomysły w swoich projektach, zdecydowanie zalecamy ponowne sprawdzenie kompatybilności między przeglądarkami.

Mamy nadzieję, że te przykłady animacji CSS3 okazały się pomocne. Życzymy twórczych sukcesów!

Być może zainteresują Cię poniższe materiały