O Rochester Oliveira
Jestem web designer i przedsiębiorca z Itajubá (MG), Brasil. Uwielbiam pisać o niejasnych tematach i robić fajne rzeczy.
Połączyć:
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.
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ć:
Zanim zaczniemy pracę nad tym postem, spójrzmy na piękne animacje wykonane w czystym CSS.
Czysty CSS Twitter Fail Whale
Czysta przewracająca się puszka CSS
Czysty CSS Walking Man
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):
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:
aktywować dezaktywować
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:
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 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:
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.
Stworzymy składane panele wykorzystując animacje CSS. Oto podstawowe HTML struktura:
Tab 1 TEKST 1 Tab 1 TEKST 1 Tab 2 TEKST 2
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? :)
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:
Przedmiot 1 Pozycja 1 Pozycja 11 Pozycja 1.1 Pozycja 12 Pozycja 1.2
A magia zaczyna się tutaj:
a {/ * tylko ulepszanie linków * / display: block; wypeł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ż się sprawdzą) * / float: left; } nav li div {/ * zwijanie dowolnego podmenu * / height: 0; przepełnienie: ukryte; / * Uczucia Houdiniego * / przejście: wysokość 1s; } nav li: hover> div {wysokość: 56px; }
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!