Jak prawidłowo korzystać z animacji CSS3: samouczek, przykładowe kody i przykłady

Kiedy używamy JS i jQuery mamy pełną kontrolę nad animacjami i możemy stworzyć niesamowite efekty, ale cena jest dość wysoka. Czas przetwarzania, kompatybilność z różnymi przeglądarkami (na przykład urządzenia mobilne są zupełnie inne, jeśli chodzi o JS), a sama złożoność kodu to punkty, o których powinniśmy pamiętać podczas tworzenia animowanych interfejsów.

Dziś zobaczymy, jak uniknąć JS, używając animacji i przejść CSS. Omówimy od bardzo podstawowych kroków niektóre niesamowite efekty, takie jak panele akordeonowe i animowane podmenu.

Złap miejsce, notatnik i prawdziwą przeglądarkę (wszystko oprócz IE) i zaczynajmy.

Rozgrzewka

Mamy wiele zalet (i wad, jak wszystko w naszym życiu) w korzystaniu z animacji CSS. Jeśli chcesz sprzedać je swojemu szefowi lub klientowi, należy o tym pamiętać:

• Są potencjalnie szybsze, ponieważ mogą wykorzystywać akcelerację sprzętową (jako implementacje HTML5)
• Będą działać lepiej na urządzeniach mobilnych i nie będą potrzebować specjalnego kodu do śledzenia zdarzeń dotykowych
• JS musi być interpretowany przez przeglądarkę, a możliwości przełamania przeglądarki są znacznie większe. Tak więc, gdy CSS zawiedzie, działa bezgłośnie, podczas gdy JS może złamać całą stronę
• Mają całkiem dobrą obsługę przeglądarki (ta strona pomoże ci sprawdzić konkretne statystyki na ten temat: http://caniuse.com/#search )

Przykłady animacji CSS3

Zanim zaczniemy pracę nad tym postem, spójrzmy na piękne animacje wykonane w czystym CSS.

Czysty CSS Twitter Fail Whale

Wykonane przez Stevena Dennisa, zobacz to w akcji.

Czysta przewracająca się puszka CSS

Wykonane przez Romana Cortesa, zobacz to w akcji.

Czysty CSS Walking Man

Wykonane przez Andrew Hoyer, zobacz to w akcji.

Brudne ręce

Zacznijmy kod. Będziemy używać wielu pseudo klas CSS do uruchomienia animacji. Szczerze mówiąc, wielu programistów zaleca używanie JS do aktywacji i dezaktywacji animacji, ale tutaj zobaczymy prostszy sposób:

#test {background: red; } #test: hover {background: green; } #test: active {background: blue; } #test: target {background: black; }

Mamy kilka innych pseudo-klas do wykorzystania, ale masz pomysł! Oto co się stanie, jeśli klikniesz na element #test (zakładając, że jest to link):

• Stan normalny: tło będzie czerwone
• Najedź: gdy mysz wejdzie w obszar elementu, będzie miała zielone tło
• Aktywny: Po kliknięciu kursorem na niego i gdy przycisk myszy jest nadal wciśnięty, kolor tła będzie niebieski
• Cel: jeśli bieżąca strona ma # test w adresie URL, ten element będzie czarny

Każdy z nich może być użyty do animacji CSS, na przykład możesz utworzyć łącza 2, aby aktywować i dezaktywować animację CSS wykorzystującą docelowy pseudo element za pomocą tego kodu:

<a href='#test'> aktywuj </a> <a href='#'> dezaktywuj </a>

Przejścia CSS

Przejście CSS zmieni się płynnie ze stanu początkowego na stan końcowy. W głównym selektorze będziesz definiować za pomocą właściwości "przejścia" czas i każdą właściwość, która będzie miała wpływ i jak powinna wyglądać animacja. Zobaczmy przykład:

.test {/ * czas przejścia funkcji-funkcja, * / kolor: niebieski; przejście: kolor 2s, rozmiar czcionki 2s-out; } .test: hover {color: red; } .test: active {font-size: 200%; }

Po najechaniu na element .test zmieni on stopniowo kolor z niebieskiego na czerwony (co za fajna paleta, co?). Po kliknięciu tego elementu rozmiar czcionki będzie stopniowo zwiększać się do 200% domyślnego rozmiaru czcionki.

Mamy również właściwość "time-out", określaną jako "łatwość", w jaki sposób wydany zostanie "czas" dostępny dla animacji. Oto możliwe wartości:

• Liniowy: ta sama prędkość od początku do końca
• Łatwość: powolny start
• Ease-out: Slow end
• Łatwość: powolny start, szybki pośrodku, a następnie wolny koniec
• Łatwe uruchamianie: powolny start, wolny koniec
• Cubic-bezier (a, b, c, d): prędkość niestandardowa

Sześcienna funkcja Beziera tworzy niestandardową animację z liczbami 4, która zmienia się od 0 do 1, reprezentując krzywą matematyczną dla czasu trwania animacji X.

Aby uzyskać lepszą kompatybilność z przeglądarką, powinieneś rozważyć użycie przedrostków dostawcy dla opery, Firefoksa i webkita w następujący sposób:

div {width: 400px; -o-transition: width 2s; -moz-transition: width 2s; -webkit-transition: width 2s; przejście: szerokość 2; }

Można również użyć zapytań o media, aby zdefiniować różne przejścia w zależności od szerokości przeglądarki (urządzenia mobilne, tablety). To prosty przykład:

body {rozmiar-czcionki: 1em; } @media ekran i (maksymalna szerokość: 800px) {body {rozmiar czcionki: 0.8em; }} @media ekran i (maksymalna szerokość: 400px) {body {Rozmiar czcionki: 0.7em; }}

Tutaj rozmiar czcionki zmieni się nagle, gdy zwiększysz szerokość przeglądarki. Ten kod zapobiegnie temu, dając znacznie płynniejsze przejście:

body {-o-transition: rozmiar czcionki .5s linear; -moz-transition: rozmiar czcionki .5s linear; -webkit-transition: rozmiar czcionki .5s linear; przejście: rozmiar czcionki .5s liniowy; }

Możesz użyć tego również, jeśli masz różne wyświetlacze lub rozmiary dla portretu / krajobrazu, jeśli chcesz zmienić szerokości, kolory, wypustki, wyświetlanie menu.

Animacja CSS - rozpoczyna się prawdziwa zabawa

Animacja jest sekwencją przejść zdefiniowanych w pojedynczym selektorze. Aby zdefiniować animacje CSS, musisz wykonać kroki 2.

Reguła @keyframe służy do definiowania sekwencji kroków animacji i jest definiowana przez unikalną nazwę i style opisujące działanie tej animacji. Jak zwykle będziemy potrzebować prefiksów dostawcy, jak w tym przykładzie:

/ * ten sam kod dla każdego dostawcy * / @ -o-keyframe moja-animacja {... @ -moz-keyframe moja-animacja {... @ -webkit-keyframe moja-animacja {... / * nazwa animacji * / @keyframe moja-animacja {/ * wybór ramki * / 0% {/ * styl ramki * / lewo: 0px; Początek: 0px; } 25% {Po lewej: 200px; Początek: 0px; } 50% {Po lewej: 200px; Początek: 200px; } 75% {Po lewej: 0px; Początek: 200px; } 100% {Po lewej: 0px; Początek: 0px; }}

Zatem każdy styl jest określany przez ramkę / ramkę czasową (podobnie jak te klatki z animacji flash) jako procent i style, które powinny być tam stosowane. Ta klatka kluczowa na przykład mówi, że element przesunie się w lewo, następnie w górę, następnie w prawo, a następnie w dół.

Po wykonaniu kroku 1 i utworzeniu klatki kluczowej możesz faktycznie zastosować ją do elementu. Wtedy użyjemy prawie takiej samej logiki, jak w przypadku przejścia CSS, różnica polega na tym, że teraz nasze "przejście" jest bardzo złożoną animacją.

Aby go zastosować, użyjemy właściwości animacji i jej podwłaściwości:

• Nazwa: ten unikalny identyfikator
• Czas trwania: ile czasu zajmie od 0% do 100%
• Funkcja czasu: prawie taka sama jak funkcja czasowa przejścia
• Opóźnienie: Ile czasu zajmie uruchomienie 0%
• Iteracja-liczba: Ile powtórzeń będziemy mieli ("nieskończona" dla nieskończonej pętli)
• Kierunek: normalny lub alternatywny (wsteczny)
• Play-state: jeśli animacja jest uruchomiona lub wstrzymana

Spowoduje to zastosowanie naszej animacji do elementu #test, gdy jest to cel strony:

#test: cel {/ * nazwa-animacji | czas trwania | funkcja czasu delay | iteration-count | kierunek | play-state * / animation: moja-animacja 10s linear 0s nieskończona normalna praca; }

Mając to na uwadze, możemy stworzyć kilka wspaniałych przykładów.

Tylko akordeon CSS

Stworzymy składane panele z wykorzystaniem animacji CSS. Oto podstawowa struktura HTML:

<div class = "accordion"> <a href="#tab1"> Tab 1 </a> <div id = "tab1"> <p> TEXT 1 </ p> </ div> <a href = "# tab2 "> Tab 2 </a> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> Tab 3 </a> <div id =" tab3 "> <p> TEXT 3 </ p> </ div> </ div>

To po prostu stworzy panele i link, który uruchomi każdą z nich. I tu właśnie dzieje się magia:

/ * dowolny div, który znajduje się wewnątrz akordeonu * / .accordion div {/ * jest domyślnie ukryty * / height: 0; przepełnienie: ukryte; / * czarna magia * / przejście: wysokość 1; } / * kiedy wspomniany div jest celem * / .accordion div: target {/ * height: auto nie działa, ale to zadziała poprawnie * / height: 80px; }

Całkiem proste, co? I spędziłeś całe życie używając JS do tego? :)

Tylko menu CSS z podmenu

A to kolejna raczej prosta aplikacja. Na pewno masz menu nawigacyjne w swojej witrynie i często musimy tam korzystać z niektórych podmenu. Najlepszym sposobem pokazywania i ukrywania przedmiotów jest używanie jQuery, prawda? Pomyśl jeszcze raz po przetestowaniu tego kodu:

<nav> <ul> <li> <a href='#item1'> Item 1 </a> <div> <ul> <li> <a href='#item11'> Item 1.1 </a> </ li> <li> <a href='#item12'> Pozycja 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Pozycja 2 </a> <div> <ul> <li> <a href='#item21'> Element 2.1 </a> </ li> <li> <a href='#item22'> Element 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

A magia zaczyna się tutaj:

a {/ * właśnie sprawia, że ​​linki są odrobinę lepsze * / display: block; dopełnienie: 4px; } nav {text-align: center; } / * dowolne menu (w tym główne) * / nav ul {display: inline-block; styl listy: brak; } nav> ul> li {/ * poziome elementy (pionowe też zadziałają) * / float: left; } nav li div {/ * zwijanie dowolnego podmenu * / wysokość: 0; przepełnienie: ukryte; / * Uczucia Houdini * / przejście: wzrost 1; } nav li: hover> div {height: 56px; }

Reasumując

Jest to z pewnością tylko przewodnik dla początkujących. Istnieje wiele innych fajnych efektów, które można zrobić za pomocą animacji tylko CSS i wielu rzeczy na pewno jeszcze przed nami.

Czy używałeś tego wcześniej? Czy możesz wymyślić inną dobrą aplikację do animacji CSS? Podziel się przemyśleniami, korzystając z komentarzy!