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

Za pomocą przekształceń i przejść można tworzyć ciekawe animacje za pomocą CSS3. Transformacje służą do zmiany elementu z jednego stanu na inny. Przykładami mogą być obracanie, przesuwanie, pochylanie i skalowanie elementów. Bez przejścia transformowany element zmieniłby się nagle z jednego stanu do drugiego. Aby temu zapobiec, można dodać przejście, dzięki czemu można kontrolować zmianę, dzięki czemu wygląda ona płynniej.

Jak korzystać z transformacji 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 dzięki przekształceniom 3D można również zrobić fajne rzeczy. (Gdy opanujesz 2D, 3D będzie znacznie łatwiejsze!)

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

Tłumaczyć

Metoda translate() przenosi element z jego aktualnej pozycji do nowej.
Za pomocą tego kodu dostosowany prostokąt jest przesuwany o 40 pikseli w prawo i o 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ę

rotate() obraca element zgodnie z ruchem wskazówek zegara lub przeciwnie do ruchu wskazówek zegara o określoną wartość w stopniach. 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 oryginalna szerokość i trzy razy większy niż jego oryginalna wysokość.

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

SkewX

W przypadku skewX() wpłynie to tylko na oś X. 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);

Skośny Y

To jest 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 oś 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 prostokątny element 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

Tutaj sprawy stają się interesujące, ale także bardziej wydajne w odpowiedniej sytuacji. Jeśli wykonujesz wiele przekształceń i nie chcesz zapisywać ich wszystkich osobno, te przekształcenia 2D można połączyć z metodą matrix() .

Oto podstawowy zarys, którego należy przestrzegać:

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

Tylko uwaga, potrzeba trochę badań, aby znaleźć wartości w macierzy. Oto pomocny 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

Teraz, gdy transformacje zostały omówione, ważne jest, aby pamiętać, że są one często używane z przejściami. Będzie to miało większy sens w poniższych przykładach projektów.

Warto pamiętać, że wartości można dostosować, aby przejścia między dwoma stanami elementu przebiegały dokładnie tak, jak chcesz. Pomyśl o tym jako o sposobie kontrolowania szybkości animacji podczas zmiany właściwości CSS. Jednym z przykładów, z którymi prawdopodobnie się spotkałeś, jest najechanie kursorem na przycisk. Często zdarza się, że po najechaniu na nie kursorem widać „powolne ciemnienie”, a nie tylko szybkie, natychmiastowe ciemniejenie koloru. To „powolne ciemnienie” powstało z przejściem.

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

Szczegóły przejścia

transition-property określa właściwość CSS, w której zostanie zastosowane przejście, ponieważ można 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 .

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

 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. Wartość Initial ustawi właściwość na wartość domyślną. Jeśli określono inherit , oznacza to, że dziedziczy on właściwość ze swojego 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 sekwencja skrócona:

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

Planowanie animacji

Zanim stworzysz naprawdę szczegółowe animacje, dobrze jest cofnąć się o krok przed stworzeniem czegoś całkowicie szalonego (zwłaszcza jeśli będzie to publiczne w sieci). Nie ma nic złego w dodaniu zabawnego stylu, ale kuszące jest przesadne animowanie. Ruch, który tworzysz, powinien przekazywać znaczenie i poprawiać wrażenia użytkownika, a nie odwracać od niego uwagę. Powiedziawszy to, czas zacząć tworzyć!

Chcę zawołać, że w tym samouczku są animowane gify, aby pokazać animacje. Gify są powtarzane, co zwykle nie byłoby wykonywane w przypadku projektów. Celem ich powtarzania jest wyłącznie do celów demonstracyjnych.

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

Zanim przejdziemy do skomplikowanych transformacji i przejść, porozmawiajmy o współrzędnych na siatce osi. (Uwaga: może to przywołać wspomnienie papieru milimetrowego z zajęć z matematyki.) Współrzędne służą do przesuwania obrazu.

Współrzędne X i Y

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

Animacja pierwsza: podstawowa transformacja z ruchem poziomym

Krótko omówiliśmy podstawę translate() i sposób, w jaki może przenosić element. W praktyce może naprawdę unosić twoją łódź, dosłownie. Jak dowiedzieliśmy się powyżej, metoda translate() przesuwa element z jego aktualnej 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 wynurzyć się, by zaczerpnąć powietrza, więc ostrożnie nadamy temu styl za pomocą translate() .

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

Okręt podwodny wznoszący się w powietrze za pomocą funkcji transform()

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

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.

Naprawdę nie potrzeba wiele CSS, aby wykonać tę podstawową animację:

 .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. Podczas zawisu łódź podwodna przesuwa się do nowych współrzędnych z powodu transformacji.

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

Podstawowa animacja druga: ruch w poziomie z klatkami kluczowymi i animacją

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

Podstawowe informacje o klatkach kluczowych

Wewnątrz @keyframes definiujesz style i etapy animacji. Oto przykład, którego użyjemy, aby 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 przekształcenia są włączane do klatek kluczowych. Oryginalne położenie jest ustawione na 0%, a na 100% pozycja przesunie się w dół o 30 pikseli.

Podstawy animacji

Aby użyć animacji CSS3, należy określić klatki kluczowe dla animacji.

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

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

Konkretne akcje z właściwościami podrzędnymi animacji

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

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

Oto kilka przykładów właściwości podrzędnych 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 powinien zająć animacja, aby zakończyć jeden pełny cykl.
• Animation-timing-function: Czas animacji, w szczególności sposób, w jaki animacja przechodzi przez klatki kluczowe. Funkcja ta posiada możliwość wyznaczania krzywych przyspieszenia. Przykładami są linear , ease , ease-in , ease-out , ease-in-out lub cubic-bezier .
• Opóźnienie animacji: Opóźnienie między załadowaniem elementu a początkiem animacji.
• Liczba iteracji animacji: Liczba powtórzeń animacji. Chcesz, aby animacja trwała wiecznie? Możesz określić infinite , aby powtarzać animację w nieskończoność.
• Animation-direction: Określa, czy animacja powinna zmieniać kierunek przy każdym przejściu przez sekwencję, czy resetować się do punktu początkowego i powtarzać.
• Animation-fill-mode: Wartości 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ół.

Wygładzenie animacji poprzez dostosowanie klatek kluczowych

Kilka dodatkowych klatek kluczowych 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.

Regulacja 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 pozwala na to wyrównanie opóźnienia z ruchem łodzi podwodnej.

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 sześciennego beziera w animacji CSS3

Nadszedł czas, aby uczcić nasze postępy w animacji, tworzą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ś takiego jak ten 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% i trwa dwie sekundy. Klatki kluczowe w progressMotion kontrolują krycie.

Krzywa Beziera CSS

Funkcji cubic-bezier() można użyć wraz z właściwością transition-timing-function do kontrolowania, w jaki sposób przejście będzie zmieniać prędkość w czasie trwania. Zobaczysz to na animacji. Widzisz, jak zaczyna się trochę wolniej, a potem przyspiesza?

Pomocne jest wyobrażenie sobie opakowania Beziera jako kwadratu. Lewy dolny i prawy górny róg 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 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 to współrzędna 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 więc 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. Mamy nadzieję, że obejrzenie tych podstawowych przykładów animacji CSS3 pomogło ci zobaczyć, jakie są inne możliwości.