Jak używać przejść i przekształceń CSS3 do tworzenia animacji

Ciekawe animacje można tworzyć za pomocą CSS3, używając przekształceń i przejść. Przekształcenia są używane do zmiany elementu z jednego stanu na inny. Przykładami mogą być elementy obracające się, przesuwające, pochylające i skalujące. Bez przejścia transformowany element zmieniałby się nagle z jednego stanu w drugi. Aby temu zapobiec, można dodać przejście, dzięki czemu można kontrolować zmianę, dzięki czemu będzie wyglądać płynniej.

Jak korzystać z przekształceń CSS3

Istnieje kilka typów powszechnie używanych przekształceń. W tym samouczku skupimy się na przykładach 2D, ale dobrze jest mieć świadomość, że za pomocą przekształceń 3D można również zrobić fajne rzeczy. (Kiedy opanujesz 2D, 3D będzie znacznie łatwiejsze!)

W poniższych przykładach oryginalne prostokąty mają ciemniejszą zieleń, a przekształcone są nieco bardziej przezroczyste.

Tłumaczyć

Metoda translate() przenosi element z jego aktualnej pozycji na nową.
Za pomocą tego kodu dopasowany prostokąt jest przesuwany o 40 pikseli w prawo i 100 pikseli w dół od bieżącej pozycji.

 -ms-transform: translate(40px, 100px); /* IE 9 */
    -webkit-transform: translate(40px, 100px); /* Safari */
    transform: translate(40px, 100px);

Obracać się

Metoda rotate() obraca element zgodnie z ruchem wskazówek zegara lub przeciwnie do ruchu wskazówek zegara o określoną wartość stopnia. Ten kod obraca prostokąt zgodnie z ruchem wskazówek zegara o 40 stopni.

-ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Safari */
    transform: rotate(40deg);

Skala

Metoda scale() zwiększa lub zmniejsza rozmiar elementu (zgodnie z parametrami podanymi dla szerokości i wysokości). W tym przykładzie dopasowany prostokąt jest dwa razy większy niż jego pierwotna szerokość i trzy razy większy niż jego pierwotna wysokość.

 -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);

Pochyl X

W przypadku skewX() , tylko oś x zostanie zmieniona. Ten prostokąt jest pochylony o 30 stopni wzdłuż osi x:

  -ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Safari */
    transform: skewX(30deg);

Pochyl Y

To ten sam pomysł, ale na osi y. Metoda skewY() pochyla element wzdłuż osi y o zdefiniowany kąt. Ten prostokąt jest pochylony o 30 stopni wzdłuż osi y.

-ms-transform: skewY(30deg); /* IE 9 */
    -webkit-transform: skewY(30deg); /* Safari */
    transform: skewY(30deg);
}

Krzywy

Jeśli chcesz pochylić zarówno oś x, jak i y, możesz to zrobić w jednym miejscu. Metoda skew() pochyla element wzdłuż osi x i y przy użyciu określonych kątów. Poniższy przykład pochyla element prostokąta o 30 stopni wzdłuż osi x i 20 stopni wzdłuż osi x.

-ms-transform: skew(30deg, 20deg); /* IE 9 */
    -webkit-transform: skew(30deg, 20deg); /* Safari */
    transform: skew(30deg, 20deg);

Matryca

To tutaj robi się ciekawie, ale w odpowiedniej sytuacji jest też wydajniej. Jeśli wykonujesz wiele przekształceń i nie chcesz zapisywać ich wszystkich osobno, te przekształcenia 2D można połączyć za pomocą metody matrix() .

Oto podstawowy zarys do naśladowania:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Tylko heads-up, potrzeba trochę badań, aby znaleźć wartości w macierzy. Oto przydatny przewodnik na początek.

Aby zrobić ten przykład, oto wartości macierzy:

  -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(2, -0.3, 0, 1, 0, 0);

Jak korzystać z przejść CSS3

Po omówieniu przekształceń należy zauważyć, że są one często używane z przejściami. Nabierze to większego sensu w poniższych przykładach projektowych.

Warto pamiętać, że wartości można dostosować tak, aby przejście między dwoma stanami elementu było takie, jak sobie życzysz. Pomyśl o tym jako o sposobie kontrolowania szybkości animacji podczas zmiany właściwości CSS. Jednym z przykładów, na który prawdopodobnie się natknąłeś, jest najechanie kursorem na przycisk. Po najechaniu na niego często można zobaczyć „powolne ciemnienie”, a nie tylko szybki, natychmiastowy ciemniejszy kolor. To „powolne ciemnienie” powstało z przejściem.

Jeśli podajesz wiele wartości, przyda się skrót. Własność CSS transition jest skróconą własnością dla transition-property , transition-duration , transition-timing-function , i transition-delay .

Szczegóły przejścia

Właściwość transition-property CSS, w której zostanie zastosowane przejście, ponieważ możesz zastosować przejście do pojedynczej właściwości. Przykłady zastosowania przejścia do pojedynczej właściwości to tło lub transformacja. Jeśli chcesz kierować reklamy na wszystkie właściwości w witrynie, właściwość transform można ustawić na all .

Czas transition-duration jest pomocny, gdy zmiany we właściwościach mają miejsce w określonym czasie, a nie natychmiast. Zobaczysz sekundy i milisekundy jako możliwe wartości.

transition-duration: 7s;
transition-duration: 120ms;
transition-duration: 2s, 3s;
transition-duration: 10s, 30s, 230ms;

Właściwość CSS transition-timing-function pozwala ustalić krzywą przyspieszenia, dzięki czemu prędkość przejścia może zmieniać się w czasie jego trwania. Istnieje wiele opcji do eksperymentowania.

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay jest dość oczywiste. Określona wartość określa liczbę sekund lub milisekund oczekiwania przed rozpoczęciem efektu przejścia. Initial ustawi właściwość na jej wartość domyślną. Jeśli określono inherit , oznacza to, że dziedziczy właściwość z elementu nadrzędnego.

Here are all the properties:
transition-property: background; //all
  transition-duration: 1s;
  transition-timing-function: linear; //other options are ease
  transition-delay: 0.5s;

Oto podstawowa skrócona konfiguracja przejścia:

div {
  transition: [property] [duration] [timing-function] [delay];
}

Pełna skrócona sekwencja:

div {
  transition: background 1s linear 0.5s;
}

Planowanie animacji

Zanim stworzysz naprawdę szczegółowe animacje, dobrze jest zrobić krok w tył, zanim stworzysz coś całkowicie szalonego (zwłaszcza jeśli będzie to publicznie dostępne w sieci). Nie ma nic złego w dodawaniu zabawnego stylu, ale kuszące jest przesadne animowanie. Ruch, który tworzysz, powinien przekazywać znaczenie i poprawiać wrażenia użytkownika, a nie odwracać jego uwagę. Mając to na uwadze, czas zacząć tworzyć!

Chciałbym zaznaczyć, że w tym samouczku znajdują się animowane gify, które pokazują animacje. Gify się powtarzają, czego zwykle nie robi się w przypadku projektów. Ich powtarzanie służy wyłącznie do celów demonstracyjnych.

Przenoszenie obrazu za pomocą właściwości transformacji CSS

Zanim przejdziemy do skomplikowanych przekształceń i przejść, porozmawiajmy o współrzędnych na siatce osi. (Uwaga: może to przywołać wspomnienia o papierze milimetrowym z zajęć z matematyki.) Współrzędne są używane do przesuwania obrazu.

współrzędne X i y

Sprawy będą wyglądać nieco inaczej niż można się spodziewać. Wartość -y znajduje się powyżej osi x. HTML i CSS używają tak zwanego „odwróconego kartezjańskiego układu współrzędnych”, ponieważ strony internetowe zaczynają się od lewego górnego rogu i czytają w dół.

Animacja pierwsza: Transformacja podstawowa z ruchem poziomym

Pokrótce dotknęliśmy podstawy translate() i tego, jak może przenosić element. W praktyce może dosłownie unosić twoją łódź. Jak dowiedzieliśmy się powyżej, metoda translate() przenosi element z jego bieżącej pozycji (zgodnie z parametrami podanymi dla osi x i y).

Pierwszym projektem będzie przeniesienie grafiki łodzi podwodnej. Okręty podwodne muszą raz na jakiś czas wypłynąć w powietrze, więc starannie dostosujemy je za pomocą translate() .

Aby przenieść go z pozycji początkowej za pomocą transform: translate(x,y) , trzeba będzie określić dwie nowe wartości. Aby łódź podwodna poruszała się w prawo iw górę, wartość x powinna być dodatnia, a wartość y ujemna. Jeśli wartość y jest ustawiona na 0, przesunie się tylko w prawo, a nie w górę.

Łódź podwodna wzbija się w powietrze z transform()

W tym przykładzie przesuniemy obiekt o 200px w prawo i 25px w górę. Składnia to transform: translate(200px,-25px); a obiekt poruszy się po najechaniu na .underwater . Tworząc style ruchu w .underwater:hover .move-right , akcja będzie się odbywać po najechaniu myszą.

Oto początkowy kod HTML:

<div class="underwater">
  <div class="object submarine move-right">
  	<!-- image is set as a background image on submarine -->
  </div>
</div>

Zobacz to na Codepen.

Wykonanie tej podstawowej animacji naprawdę nie wymaga dużo CSS:

.underwater {
  position: relative;
  min-height: 600px;
  background-color: #4fc3da;
}

.underwater:hover .move-right{
    transform: translate( 200px ,-25px );
    -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/
    -ms-transform: translate( 200px ,-25px ); /** Firefox **/
}

.submarine {
  height: 200px;
  background: url("little-submarine.svg") no-repeat;
}

.object {
  transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -ms-transition: all 2s ease-in-out; /** Opera **/
}

Jak widać, nasze współrzędne wypadłyby w prawym górnym kwadracie. Po najechaniu, łódź podwodna przesuwa się do nowych współrzędnych ze względu na transformację.

Sprawy wyglądają gładko z powodu przejścia. Czas transition-duration został ustawiony na 2sec , co nie jest zbyt szybkie dla tej animacji. Funkcja transition-timing-function została ustawiona na ease-in-out co daje wolniejszy początek i koniec. Jeśli czas trwania zostałby zwiększony do czegoś większego, byłoby to bardzo oczywiste.

Podstawowa animacja druga: Ruch poziomy z klatkami kluczowymi i animacją

W tym przykładzie funkcja Transform jest używana nieco inaczej. Klatki kluczowe i właściwość animacji zostaną wykorzystane do utworzenia następnej animacji.

Podstawy klatek kluczowych

Wewnątrz @keyframes definiujesz style i etapy animacji. Oto przykład, którego użyjemy, który pomoże uzyskać efekt „zanikania podczas ruchu w dół”:

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translate(0, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 30px);
  }
}

Wartości transformacji są włączane do klatek kluczowych. Pierwotne miejsce docelowe jest ustawione na 0%, a przy 100% pozycja przesunie się w dół o 30px.

Podstawy animacji

Aby użyć animacji CSS3, określ klatki kluczowe animacji.

Jak korzystać z zapytań funkcji CSS

Świat projektowania stron internetowych ciągle się zmienia, a śledzenie nowych trendów w CSS jest ekscytujące. Jeśli jesteś początkującym użytkownikiem CSS, być może już nie możesz się doczekać korzystania z takich rzeczy jak CSS Grid...

Jak zaprojektowano powyżej, @keyframes przechowuje style, które element będzie miał w określonych momentach.

Za każdym razem, gdy to zrobisz, upewnij się, że nadałeś animacji opisową nazwę. W tym przypadku używamy fadeOut . Zastosowana zostanie każda klasa zawierająca fadeOut . Na etapach animacji „od” jest ustawiane na 0%, a „do” na 100%. Ten przykład jest dość prosty i zawiera tylko dwa etapy, ale z pewnością można dodać więcej kroków pomiędzy nimi.

Konkretne działania z podwłaściwościami animacji

Właściwość animacji służy do wywoływania @keyframes wewnątrz selektora CSS. Animacje mogą i często będą mieć więcej niż jedną podwłaściwość.

Klatki kluczowe definiują wygląd animacji; właściwości podrzędne definiują szczegółowe zasady animacji. Czas, czas trwania i inne kluczowe szczegóły dotyczące postępu sekwencji animacji są zawarte we właściwościach podrzędnych.

Oto kilka przykładów podwłaściwości animacji:

• Animation-name: nazwa @keyframesat-rule , która opisuje klatki kluczowe animacji. Nazwa fadeOut w poprzednim przykładzie jest przykładem animation-name .
• Czas trwania animacji: czas, jaki powinna zająć animacja, aby ukończyć jeden pełny cykl.
• Funkcja czasu animacji: czas trwania animacji, w szczególności sposób przejścia animacji przez klatki kluczowe. Ta funkcja ma możliwość ustalenia krzywych przyspieszenia. Przykłady to linear , ease , ease-in , ease-out , ease-in-out lub cubic-bezier .
• Opóźnienie animacji: Opóźnienie między momentem załadowania elementu a początkiem animacji.
• Animation-iteration-count: Liczba powtórzeń animacji. Chcesz, aby animacja trwała wiecznie? Możesz określić infinite , aby powtarzać animację w nieskończoność.
• Kierunek animacji: Określa, czy animacja powinna zmieniać kierunek przy każdym przebiegu sekwencji, czy też powracać do punktu początkowego i powtarzać się.
• Tryb wypełniania animacji: wartości, które są stosowane przez animację zarówno przed, jak i po jej wykonaniu.
• Animation-play-state: Dzięki tej opcji możesz wstrzymać i wznowić sekwencję animacji. Przykładami są none , forwards , backwards lub both .

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

Oto jak by to wyglądało napisane w skrócie:

animation: 4s ease-in-out 1 paused fadeInDown;

Oto struktura HTML:

<div class="underwater">

    <div class="content-wrap fadeInDown">

    <div class="submarine"></div>

      <h2>Cute Submarine</h2>

      <p>Text here.</p>

    </div>

</div>

Klasa fadeInDown sprawia, że ​​łódź podwodna i zawartość poruszają się w górę iw dół.

Zwiększanie płynności animacji poprzez dostosowywanie klatek kluczowych

Dzięki kilku dodatkowym klatkom kluczowym możemy sprawić, że animacja będzie znacznie płynniejsza.

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(5px);
  }

  25% {
    opacity: .9;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: .9;
    transform: translateY(0);
  }
}

Zobacz to na Codepen.

Dostosowywanie czasu animacji

Dodanie większej liczby klatek kluczowych pomogło wygładzić animację, ale możemy dodać trochę więcej interaktywności dzięki większej liczbie klatek kluczowych i opóźnieniu tekstu w div, który zawiera cały tekst. To zabawny efekt, gdy łódź podwodna odbija się od tekstu, więc dopasowanie opóźnienia do ruchu łodzi podwodnej pozwala na to.

HTML będzie miał zastosowane efektywne klasy:

<div class="underwater">

    <div class="submarine move-down fadeInDown"> </div>

    <div class="moving-content move-down text-delay fadeInDownText">

      <p>Text goes here.</p>

    </div>

</div>

A oto zaktualizowany CSS, który pozwala na interaktywną animację:

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDownText {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(35px);
  }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.fadeInDownText {
    -webkit-animation-name: fadeInDownText;
    animation-name: fadeInDownText;
}

 .move-down{
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.text-delay {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

Zobacz to na Codepen.

Pasek postępu Cubic-Bezier w animacji CSS3

Czas uczcić nasze postępy w animacji, robiąc pasek postępu!

Wszystkie koncepcje, które omówiliśmy, połączą się, aby stworzyć coś takiego. Pasek postępu jest bardzo powszechnym elementem interfejsu użytkownika, więc utworzenie czegoś tak funkcjonalnego pomoże Ci zobaczyć, jak można animować inne elementy sieci.

Oto początkowy kod HTML:

<div class="container">
  <div class="row">
    <div class="masthead">
      <p>CSS3 Loading Bar</p>
    </div>
  </div>
 <div class="fast-loader"></div>
</div>

I CSS, aby go ożywić:

@keyframes speedSetting {
  0% { width: 0px; }
  100% { width: 100%; }
}

@keyframes progressMotion {
  0% { opacity: 1; }
  50% {opacity: 1; }
  100% { opacity: 0; }
}

.fast-loader {
  width: 0px;
  height: 10px;
  background: linear-gradient(to left, blue,rgba(255,255,255,.0));
  animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
-webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
}

W pierwszym zestawie klatek kluczowych szerokość zmienia się od 0 do 100% z czasem trwania wynoszącym dwie sekundy. Klatki kluczowe w progressMotion kontrolują krycie.

Krzywa Beziera CSS

Funkcja cubic-bezier() może być używana z właściwością transition-timing-function do kontrolowania, w jaki sposób tranzycja zmienia prędkość w czasie jej trwania. Zobaczysz to na animacji. Widzisz, jak zaczyna się trochę wolniej, a potem nabiera tempa?

Pomocne jest przedstawienie opakowania Beziera jako kwadratu. Lewy dolny i prawy górny to miejsca, w których znajdują się kluczowe punkty, czyli P0 i P3. Są one zawsze ustawione na (0,0) i (1,1), które się nie zmieniają. Jednak punkty P1 i P2 można przesuwać za pomocą funkcji cubic-bezier() , jeśli określisz nowe punkty za pomocą wartości x lub y.

• x1 jest współrzędną x punktu kontrolnego p1
• y1 jest współrzędną y punktu kontrolnego p1
• x2 jest współrzędną x punktu kontrolnego p2
• y2 jest współrzędną y punktu kontrolnego p2

Oto kilka przykładowych wartości:

x1 = 0,7
y1 = 0,16
x2 = 0,2
y2 = 0,9

Przykład może wyglądać tak:

cubic-bezier(.7,.16,.2,.9)

Pasek postępu jest doskonałym przykładem tego, jak bezier może dostosować czas animacji. Dzięki przekształceniom, przejściom i wielu innym opcjom można łatwo tworzyć niestandardowe animacje. Mam nadzieję, że zapoznanie się z tymi podstawowymi przykładami animacji CSS3 pomogło ci zobaczyć, jakie są inne możliwości.

Co dalej: wtyczki WordPress, które pokochasz

Pobierz ten ebook, aby zobaczyć listę naszych najbardziej polecanych wtyczek dla programistów! Odkryliśmy, że wszystkie te wtyczki są proste w użyciu, nie mają zbyt dużej wydajności w Twojej witrynie i są po prostu niezawodne.