Jak dobrze wykorzystać animacje CSS3: samouczek, przykładowe kody i przykłady

Kiedy używamy JS i jQuery, mamy pełną kontrolę nad animacjami i możemy tworzyć 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 kwestie, o których należy pamiętać przy tworzeniu animowanych interfejsów.


Więc dzisiaj zobaczymy, jak uniknąć JS za pomocą animacji i przejść CSS. Omówimy od bardzo podstawowych kroków do niesamowitych efektów, takich jak panele akordeonu i animowane podmenu.

Chwyć miejsce, notatnik i prawdziwą przeglądarkę (wszystko oprócz IE) i zacznijmy.

Rozgrzewka

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

  • Są potencjalnie szybsze, ponieważ mogą korzystać z akceleracji sprzętowej (jako implementacje HTML5)
  • Będą działać lepiej na urządzeniach mobilnych i nie będą potrzebować specjalnego kodu do śledzenia zdarzeń dotykowych
  • Przeglądarka JS musi być interpretowana, a możliwości jej uszkodzenia są znacznie większe. Więc gdy CSS zawiedzie, nie powiedzie się cicho, podczas gdy JS może zniszczyć całą stronę
  • Mają dość dobrą obsługę przeglądarki (ta strona pomoże ci sprawdzić określone statystyki na tym: http://caniuse.com/#search)

Przykłady animacji CSS3

Zanim zaczniemy od treści tego postu, spójrzmy na piękne animacje wykonane w czystym CSS.

Pure CSS Twitter Fail Whale

Animowany Wieloryb Nieudany

 Wykonane przez Stevena Dennisa, zobacz to w akcji.

Pure CSS Scrolling Coke Can
Przykłady animacji CSS 3: Przewijana puszka coli

Wykonane przez Romana Cortesa, zobacz to w akcji.

Pure CSS Walking Man

Przykłady animacji CSS 3: The Walking Man

 Wykonane przez Andrew Hoyera, zobacz to w akcji.

Zabrudzenie rąk

Zacznijmy kod. Użyjemy dużo pseudoklas CSS do uruchomienia animacji. Szczerze mówiąc, wielu programistów zaleca używanie JS do aktywacji i dezaktywacji animacji, ale tutaj zobaczymy łatwiejszy sposób:

#test {
tło: czerwony;
}
#test: hover {
tło: zielony;
}
#test: active {
tło: niebieski;
}
#test: target {
tło: czarny;
}

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

  • Stan normalny: tło będzie czerwone
  • Najedź kursorem: gdy mysz wejdzie w obszar elementu, będzie miała zielone tło
  • Aktywny: po kliknięciu kursora i przytrzymaniu przycisku myszy kolor tła będzie niebieski
  • Cel: gdy bieżąca strona ma #test w adresie URL, ten element będzie czarny

Każdego z nich można użyć do animacji CSS, na przykład można utworzyć 2 łącza do aktywacji i dezaktywacji animacji CSS przy użyciu docelowego pseudoelementu za pomocą tego kodu:

Aktywuj
dezaktywować

Przejścia CSS

Przejście CSS zmieni się płynnie ze stanu początkowego do końcowego. Tak więc w selektorze głównym zdefiniujesz za pomocą właściwości „przejścia” czas i każdą właściwość, na którą będzie miało to wpływ, oraz sposób animacji. Zobaczmy przykład:

.test {
/ * funkcja czasu trwania właściwości przejścia, * /
kolor niebieski;
przejście: kolor 2s, czcionka 2s easy-out;
}
.test: hover {
kolor czerwony;
}
.test: aktywny {
rozmiar czcionki: 200%;
}

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

Mamy również właściwość „czas przejścia”, ustawioną jako ułatwienie, czyli sposób, w jaki „czas” dostępny dla animacji zostanie wykorzystany. Oto możliwe wartości:

  • Liniowy: Ta sama prędkość od początku do końca
  • Łatwość: Powolny start
  • Łatwość: powolny koniec
  • Łatwość: Powolny start, szybki w środku, a następnie wolny koniec
  • Łatwość wejścia: wolny start, wolny koniec
  • Cubic-Bezier (a, b, c, d): Prędkość niestandardowa

Sześcienna funkcja Beziera utworzy niestandardową animację z 4 liczbami, które różnią 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 prefiksów dostawcy dla opery, Firefoksa i pakietu internetowego w następujący sposób:

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

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

ciało {
rozmiar czcionki: 1em;
}
@media screen i (maksymalna szerokość: 800px) {
ciało {
rozmiar czcionki: 0,8em;
}
}
@media screen i (maksymalna szerokość: 400px) {
ciało {
Rozmiar czcionki: 0,7 em;
}
}

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

ciało {
-o-przejście: rozmiar czcionki .5s liniowy;
-moz-przejście: rozmiar czcionki .5s liniowy;
-webkit-przejście: rozmiar czcionki .5s liniowy;
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, wypełnienia, wyświetlanie menu.

Animacja CSS – zaczyna się prawdziwa zabawa

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

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 dostawców, takich jak w tym przykładzie:

/ * ten sam kod dla każdego dostawcy * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * nazwa animacji * /
@keyframe my-animation {
/ * wybór ramki * /
0% {
/ * styl ramki * /
Po lewej: 0px;
Góra: 0px;
}
25% {
Po lewej: 200 pikseli;
Góra: 0px;
}
50% {
Po lewej: 200 pikseli;
Góra: 200 pikseli;
}
75% {
Po lewej: 0px;
Góra: 200 pikseli;
}
100% {
Po lewej: 0px;
Góra: 0px;
}
}

Zatem każdy styl jest określony przez ramkę / ramy czasowe (podobnie jak te z animacji flash) jako procent i style, które należy tam zastosować. Na przykład ta klatka kluczowa mówi, że element przesunie się w lewo, potem w górę, potem w prawo, a następnie na dół.

Po wykonaniu kroku 1 i utworzeniu klatki kluczowej możesz faktycznie zastosować ją do elementu. Następnie zastosujemy tę samą logikę, co w przypadku przejścia CSS, z tą różnicą, że teraz nasze „przejście” jest bardzo złożoną animacją.

Aby go zastosować, użyjemy właściwości animacji i ma ona 7 właściwości podrzędnych:

  • Nazwa: ten unikalny identyfikator
  • Czas trwania: jak długo potrwa od 0% do 100%
  • Funkcja pomiaru czasu: prawie taka sama jak funkcja pomiaru czasu przejścia
  • Opóźnienie: jak długo potrwa uruchomienie 0%
  • Licznik iteracji: ile powtórzeń będziemy mieli („nieskończony” dla nieskończonej pętli)
  • Kierunek: normalny lub alternatywny (do tyłu)
  • Stan odtwarzania: jeśli animacja jest uruchomiona lub wstrzymana

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

#test: target {
/ * nazwa-animacji | czas trwania | funkcja pomiaru czasu | opóźnienie | liczba iteracji | kierunek | stan gry * /
animacja: my-animation 10s linear 0s nieskończone normalne działanie;
}

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

CSS Tylko akordeon

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

Tab 1

TEKST 1

Tab 2

TEKST 2

Tab 3

TEKST 3

To po prostu utworzy panele i link, który uruchomi każdy z nich. I tutaj dzieje się magia:

/ * każdy div, który znajduje się w akordeonie * /
.akordeon div {
/ * jest domyślnie ukryty * /
wysokość: 0;
przelew: ukryty;
/ * czarna magia * /
przejście: wysokość 1s;
}
/ * kiedy wspomniany div jest celem * /
.akordeon div: target {
/ * wysokość: auto nie będzie działać, ale będzie działać dobrze * /
wysokość: 80 pikseli;
}

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

Menu tylko CSS z podmenu

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

  • Przedmiot 1
    • Pozycja 1.1
    • Pozycja 1.2
  • Pozycja 2
    • Podpunkt 2.1
    • Pozycja 2.2

I zaczyna się tutaj magia:

{
/ * po prostu ulepszam linki trochę * /
Blok wyświetlacza;
wypełnienie: 4px;
}
nav {
wyrównanie tekstu: środek;
}
/ * dowolne menu (w tym główne) * /
nav ul {
display: blok wbudowany;
styl listy: brak;
}
nav>ul>li {
/ * elementy poziome (pion również będzie działał dobrze) * /
float: left;
}
nav li div {
/ * zwijanie dowolnego podmenu * /
wysokość: 0;
przelew: ukryty;
/ * Uczucia Houdini * /
przejście: wysokość 1s;
}
nav li: hover>div {
wysokość: 56 pikseli;
}

Podsumowując

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me