dobrze użyte, animacja CSS jest niezwykle użytecznym i potężnym narzędziem. Może dodać zainteresowania lub twórczego podniecenia, skierować oko użytkownika, wyjaśnić coś szybko i zwięźle i poprawić użyteczność. Z tego powodu w ostatnich latach pojawiło się coraz więcej animacji na stronach i w aplikacjach.
w tym artykule zebraliśmy kilka najfajniejszych przykładów animacji CSS, jakie widzieliśmy, i pokażemy, jak je odtworzyć., Czytaj dalej, aby zapoznać się z wieloma szczegółowymi samouczkami i inspirującymi efektami (oraz linkami do ich kodu).
czym jest animacja CSS?
animacja CSS jest metodą animacji niektórych elementów HTML bez konieczności używania procesora i pamięci JavaScript lub Flash. Nie ma ograniczeń co do liczby lub częstotliwości właściwości CSS, które można zmienić. Animacje CSS są inicjowane przez określenie klatek kluczowych dla animacji: te klatki kluczowe zawierają style, które będzie miał element.,
chociaż może wydawać się ograniczony, jeśli chodzi o animację, CSS jest naprawdę potężnym narzędziem i jest w stanie tworzyć pięknie gładkie animacje 60 klatek na sekundę. „Dostarczanie przemyślanych, płynnych animacji, które wnoszą znaczącą głębię do twojej witryny, nie musi być trudne”, mówi Adam Kuhn, Twórca stron internetowych front end. „Nowoczesne właściwości CSS zapewniają teraz prawie wszystkie narzędzia potrzebne do tworzenia niezapomnianych wrażeń dla użytkowników.,”
najlepsze animacje nadal mają swoje korzenie w klasycznych 12 zasadach animacji Disneya – zobaczysz kilka wzmianek o tym w tych przykładach animacji CSS, więc warto sprawdzić ten artykuł, zanim zaczniesz. Zachęcamy również do zapoznania się z naszą ofertą świetnych animowanych teledysków, aby uzyskać więcej przykładów i inspiracji.
złota zasada jest taka, że animacje CSS nie powinny być przesadzone – nawet mały ruch może mieć duży wpływ, a zbyt wiele może być rozpraszające i irytujące dla użytkowników., Oto nasze ulubione przykłady i jak je odtworzyć.
zabawny efekt myszy
autor: Donovan Hutchinson
jest to zabawny efekt, który podąża za myszą. Może być przydatny, gdy chcesz zwrócić uwagę na element na swojej stronie.
potrzebujemy bardzo mało kodu HTML dla tego efektu:
najpierw ustawiamy demo i ustawiamy perspektywę dla naszej transformacji 3D:
następnie stylujemy div, który chcemy animować:
tutaj ustawiamy tło, następnie ustawiamy overflow na hidden, aby później dodać efekt połysku., Ustawiamy również zmienne css, sheenX i sheenY.
te zmienne połysku pomogą ustawić efekt połysku. Używamy ich w naszej karcie po pseudo-elemencie:
tutaj upewniamy się, że pseudo-element jest większy niż kontener. To da nam coś do przesunięcia na górze karty za pomocą transformacji.
właściwość transform wykorzystuje te zmienne CSS, które ustawiliśmy wcześniej. Ustawimy je za pomocą JavaScript. Ustawmy JavaScript, aby najpierw nasłuchiwał zdarzeń myszy:
document.,onmousemove = handleMouseMove;
potrzebujemy teraz funkcji handleMouseMove do obsługi onmousemove:
Nasza funkcja pobiera wysokość i szerokość okna i tworzy kąt na osiach X i Y. Następnie ustawiamy je na styl transformacji naszej karty. Daje to karcie kąt oparty na myszy!
następnie wywołujemy funkcję ustawiającą pozycję pseudo-elementu:
Nasz pseudo-element wygląda najlepiej, gdy porusza się w przeciwnym kierunku niż mysz. Aby to osiągnąć, tworzymy liczbę od -0,5 do 0,5, która zmienia się w przeciwnym kierunku, obliczając stosunek przez -1.,
mnożymy tę liczbę przez 800, ponieważ chcemy, aby skalowała się do maksimum 400px, czyli jak daleko ustawiamy pseudo-element sheen poza kartą.
na koniec ustawiamy te wartości offsetu na nasze właściwości zmiennej CSS, a renderer przeglądarki robi resztę.
mamy teraz kartę, która obraca się twarzą do naszej myszy, podczas gdy efekt połysku porusza się w przeciwnym kierunku na górze. Tworzy to miły, przyciągający wzrok efekt.,
the big reveal
Autor: Adam Kuhn
animowane efekty odsłaniania treści wydają się być teraz dość popularne, a właściwie użyte mogą uchwycić koncentrację użytkownika i zaangażować odbiorców. Widziałeś to już wcześniej: Blok koloru rośnie z jednej lub drugiej strony poziomo lub pionowo, a następnie wycofuje się na przeciwną stronę, tym razem odsłaniając jakiś tekst lub obraz poniżej. Jest to koncepcja, która może wydawać się trudna, ale tak naprawdę opiera się na kilku rzeczach.,
najpierw skonfigurujemy pozycjonowanie naszego elementu – Pobierz Pełny kod tutaj) – zdefiniujemy go jako względny(tylko statyczny zawiedzie w tym przypadku). W przypadku tekstu najlepiej jest zezwolić na automatyczną wysokość i szerokość, chociaż trochę wypełnienia nie boli. Zdefiniujemy również pochodzenie transformaty, w przypadku elementu nadrzędnego chcemy użyć pozycji początkowej. Ponieważ chcemy, aby element początkowo był ukryty, użyjemy transformacji skali wzdłuż odpowiedniej osi, aby go zmniejszyć.
następnie pseudoelement maskujący nasz rodzic, ustawiający transform origin na opcję przeciwstawną., Na koniec połącz animacje, używając funkcji czasu lub opóźnień, aby je zrównoważyć.
Uwaga, przesunięto animacje rodzica i pseudo elementu z opóźnieniem informując okno, które ukrywa nasz tekst, aby odsłonić go dopiero po tym, jak sam element zostanie w pełni przeskalowany do widoku. Sprawdź Codepen poniżej.
Stagger on
Autor: Adam Kuhn
gdy już zaczniesz gromadzić porządną bibliotekę różnych urywków ułatwiających, nadszedł czas, aby spojrzeć na inne sposoby zwiększenia głębi animacji, a jednym z najlepszych sposobów jest zrównoważenie animowanych elementów.,
jest to zbyt powszechne, że JavaScript wyzwalacz jest ustawiony, aby zainicjować kilka animacji opartych na pozycji przewijania, tylko znaleźć wszystkie elementy poruszające się skutecznie w tandemie. Na szczęście sam CSS zapewnia prostą właściwość, która może sprawić, że (lub złamać) twoje animowane doświadczenie: animacja-opóźnienie.
Załóżmy na przykład, że mamy siatkę obrazów, które chcemy animować w ramce, gdy użytkownik przewija. Możemy to uruchomić na wiele sposobów, najprawdopodobniej dodając klasy do elementów, gdy wchodzą do widoku., Może to być jednak dość ciężka dźwignia w przeglądarce i można jej uniknąć, po prostu dodając jedną klasę do elementu kontenera i definiując opóźnienia animacji dla elementów potomnych.
jest to szczególnie dobry przypadek użycia dla preprocesorów takich jak SCSS lub LESS, które pozwalają nam używać pętli @for do iteracji każdego elementu.
#parent{.child{ animation: animationName 1.5s ease-in-out 1 forwards;@for $i from 1 through 20{ &:nth-of-type(#{$i}){animation-delay:#{$i/10}s; }} }}
tutaj zobaczysz, że dzięki SCSS jesteśmy w stanie zapętlić każdy selektor typu :nth, a następnie zastosować opóźnienie animacji na podstawie wartości numerycznej każdego elementu potomnego., W tym przypadku zauważysz, że dzielimy czas, aby zmniejszyć każdy przyrost do ułamka sekundy. Podczas gdy kompensacja animowanych elementów może wywołać emocje w animacji, zbyt duże opóźnienie może sprawić, że będzie ona chaotyczna. Sprawdź ten kod poniżej.
Squigglevision
Autor: Adam Kuhn
filtry SVG zapewniają świetny sposób na uzyskanie naturalnego, ręcznie rysowanego wyglądu i uniknięcie niektórych płaskich ograniczeń renderowania samego CSS. Animowanie ich może jeszcze bardziej wzmocnić efekt.
Case in point: Squigglevision., Tak, to nie jest termin techniczny znany większości animatorów, ale na pewno widziałeś go w kreskówkach. Chodzi o to, że krawędzie tych animowanych elementów są nie tylko nieco postrzępione i szorstko wycięte, ale te szorstkie krawędzie szybko się zmieniają, klatka po klatce, sprawiając, że czują się tak, jakby zostały wyrwane ze stron szkicownika i przywrócone do życia.
aby osiągnąć ten efekt, możemy umieścić na naszej stronie plik SVG z wieloma filtrami i niewielkimi zmianami poziomów turbulencji dla każdego z nich. Następnie skonfigurujemy naszą oś czasu animacji, wywołując każdy filtr we własnej klatce kluczowej., Ważne jest, aby bawić się czasem trwania, ponieważ przewidujemy, że animacja będzie „nerwowa”, ale nie chcemy, aby była tak powolna, aby czuć się chaotyczna lub tak szybka, aby czuć się szalona.
w tym celu należy zauważyć, że CSS nie ma możliwości płynnego przechodzenia między filtrami SVG, ponieważ nie ma możliwości dostępu do właściwości takich jak turbulencje i skalowanie, więc tego typu animacje powinny być zawsze niepewne.,
iv id
jak widać na: Gra Roku
autor: Leon Brown
gra roku Google zawiera zabawną animację CSS na stronie głównej, ze słowami tytułowymi dudniącymi i wpadającymi na siebie. Oto jak to było zrobione.
pierwszym krokiem jest zdefiniowanie dokumentu strony internetowej za pomocą HTML. Składa się z kontenera dokumentu HTML, który przechowuje sekcję head i body., Podczas gdy sekcja head jest używana do ładowania zewnętrznych zasobów CSS i JavaScript, treść jest używana do przechowywania zawartości strony.
zawartość strony składa się z trzech tagów tytułowych h1, które pokazują różne odmiany efektu animacji. Chociaż każdy tekst może być wstawiony do tych znaczników, ich animacja jest zdefiniowana przez nazwy w atrybucie klasy. Ustawienia prezentacji i animacji dla tych nazw klas zostaną zdefiniowane w CSS później.
następnie utwórz nowy plik o nazwie 'code.js”., Chcemy znaleźć wszystkie elementy strony za pomocą klasy animate i utworzyć listę tablic reprezentujących każde słowo wewnętrznego tekstu. Początkowe opóźnienie animacji jest również zdefiniowane w tym kroku. Zawartość strony nie jest dostępna, dopóki strona nie zostanie w pełni załadowana, więc ten kod jest umieszczany wewnątrz detektora zdarzeń ładowania okna.
zawartość słów elementów animacji musi być zawarta wewnątrz elementu span. Aby to zrobić, istniejąca zawartość HTML jest resetowana do pustego, a następnie używana jest pętla, aby słowo w zidentyfikowanej liście „słowa” stało się elementem span., Dodatkowo zastosowano styl animationDelay-obliczany w odniesieniu do początkowego opóźnienia (określonego poniżej) i pozycji indeksu słowa.
Utwórz nowy plik o nazwie style.css. Teraz ustawimy reguły prezentacji, które będą częścią każdego elementu słownego w animacji, kontrolowanego przez ich znacznik span. Wyświetlanie jako blok w połączeniu z wyśrodkowanym wyrównaniem tekstu spowoduje, że każde słowo pojawi się w oddzielnej linii poziomo wyrównanej do środka kontenera. Pozycja względna zostanie użyta do animacji względem pozycji przepływu tekstu.,
elementy animacji, które mają klasę backwards i forwards, mają przypisaną do nich specyficzną animację. Ten krok definiuje animację dla elementów span, których kontener nadrzędny ma klasę animate oraz klasę backwards lub forward.
zauważ, że nie ma spacji między odniesieniem do klasy animate i od tyłu, co oznacza, że element nadrzędny musi mieć oba te elementy.
animacja mieszana jest definiowana przy użyciu tych samych ustawień, które są używane dla animacji do przodu i do tyłu., Zamiast stosowania animacji do każdego dziecka rodzica, selektor n-tego dziecka służy do stosowania naprzemiennych ustawień animacji. Animacja do tyłu jest stosowana do każdego dziecka z parzystą liczbą, podczas gdy animacja do przodu jest stosowana do każdego dziecka z nieparzystą liczbą.
animacje, które właśnie stworzyliśmy, są wykonane z początkową pozycją „od”, Bez regulacji pozycji pionowej lub obrotu. Pozycja ” do ” to stan końcowy animacji, który ustawia elementy z regulowaną pozycją pionową i stanem obrotu., W obu animacjach stosuje się nieco inne ustawienia zakończenia, aby uniknąć nieczytelności tekstu z powodu nakładania się animacji mieszanych.
Odwróć książkę
Autor: Adam Kuhn
podczas animacji za pomocą CSS czasami konieczne jest martwe proste podejście. I jest kilka prostszych metod animacji niż flip book. Używając funkcji steps () jako funkcji timing, jesteśmy w stanie odtworzyć ten efekt. Chociaż może to brzmieć niepewnie i bezpośrednio przeczy naszej misji utrzymania płynności, przy odpowiednim tempie może czuć się równie płynnie organicznie.
Jak to działa?, Definiujemy naszą funkcję ułatwiania animacji za pomocą kilku dodatkowych parametrów-mówiących naszej animacji, ile kroków jest potrzebnych i w którym momencie pierwszego kroku chcemy rozpocząć – start, end) – wyglądając trochę tak, na przykład kroki (10, start).
w ramach naszych klatek kluczowych możemy teraz wyznaczyć punkt końcowy naszej animacji: w tym przykładzie załóżmy, że nasza animacja trwa 10 sekund i używamy 10 kroków. W takim przypadku każdy krok będzie trwał jedną sekundę, natychmiast przechodząc do następnej, jednosekundowej klatki bez przejścia między.,
znowu wydaje się, że to leci w obliczu płynności, ale tutaj schodkowe animacje mogą naprawdę zabłysnąć. Możemy stopniowo iterować przez arkusz sprite i animować klatka po klatce, tak jak flip book. Definiując klatki o jednakowym rozmiarze, ale zestawiając je na pojedynczym poziomym (lub pionowym) obrazie, możemy ustawić ten obraz jako tło elementu i zdefiniować Piksel lub procentową pozycję tła jako punkt końcowy naszej animacji, umożliwiając pojedynczy krok dla każdej klatki., Arkusz sprite przesunie i wypełni element klatka po klatce nowym obrazem tła w zależności od jego położenia.
przyjrzyjmy się przykładowi. W tym przypadku niektóre zestawy animowanych nóg dołączone do niektórych znaków tekstowych. Najpierw zdefiniujemy nazwę animacji, czas trwania, liczbę kroków, pozycję początkową i liczbę iteracji:
animation:runner 0.75s steps(32, end) infinite;
ponownie, zauważ, że czas trwania animacji jest stosunkowo szybki w czasie krótszym niż jedna pełna sekunda dla 32 wszystkich klatek., Następnie zdefiniujemy nasze klatki kluczowe:
zauważ, że pionowe pozycjonowanie obrazu jest spójne, co mówi nam, że obrazki są poziomo rozciągnięte na obrazie, co wynosi 1280px całkowitej szerokości. Ponieważ zdefiniowaliśmy 32 klatki dla tego obrazu, możemy wywnioskować, że każda klatka powinna mieć szerokość 40px. Sprawdź ten kod poniżej.
ważne jest, aby pamiętać, że duży arkusz sprite może potencjalnie poważnie utrudnić wydajność, więc pamiętaj, aby rozmiar i kompresować obrazy., Dzięki dobrze przygotowanemu arkuszowi sprite i odpowiedniemu czasowi trwania animacji masz teraz płynną animację zdolną przekazać złożone ruchy.
dmuchanie bąbelków
jak widać na: 7UP
zobacz kod
autor: Steven Roberts
animacja bąbelków CSS, która znajduje się w 7UP, jest pięknym przykładem przenoszenia motywu marki do projektu strony internetowej. Animacja składa się z kilku elementów: „rysowania” bąbelków SVG, a następnie dwóch animacji nałożonych na każdy bąbelek.,
pierwsza animacja zmienia krycie bąbelka i przesuwa go pionowo w polu widoku; druga tworzy efekt wahania dla zwiększenia realizmu. Przesunięcia są obsługiwane przez kierowanie każdego bąbelka i stosowanie innego czasu trwania animacji i opóźnienia.
do tworzenia naszych bąbelków będziemy używać SVG. W naszym SVG tworzymy dwie warstwy pęcherzyków: jedną dla większych pęcherzyków i jedną dla mniejszych pęcherzyków. Wewnątrz SVG umieszczamy wszystkie nasze bąbelki na dole pola widoku.,
aby zastosować dwie oddzielne animacje do naszych SVG-ów, obie z wykorzystaniem właściwości transform, musimy zastosować animacje do oddzielnych elementów. Element<g> w SVG może być używany podobnie jak div w HTML; musimy owinąć każdy z naszych pęcherzyków (które są już w grupie) w znacznik grupy.
CSS ma potężny silnik animacji i bardzo prosty kod do tworzenia złożonych animacji., Zaczniemy od przesunięcia bąbelków w górę ekranu i zmiany ich krycia, aby zanikły na początku i na końcu animacji.
aby stworzyć efekt wahania, musimy po prostu przesunąć (lub przetłumaczyć) bąbelek w lewo i w prawo, o odpowiednią ilość – zbyt dużo spowoduje, że animacja będzie wyglądać zbyt oszałamiająco i odłączona, podczas gdy zbyt mało będzie w większości niezauważone. Eksperymentowanie jest kluczowe podczas pracy z animacją.,
aby zastosować animację do naszych bąbelków, będziemy używać grup używanych wcześniej i pomocy n-tego typu, aby zidentyfikować każdą grupę bąbelków indywidualnie. Zaczynamy od zastosowania wartości krycia do pęcherzyków i właściwości will-change w celu wykorzystania akceleracji sprzętowej.
chcemy zachować wszystkie czasy animacji i opóźnienia w ciągu kilku sekund od siebie i ustawić je tak, aby powtarzały się w nieskończoność. Na koniec zastosujemy funkcję łatwego wprowadzania i wyłączania czasu do naszej animacji, aby wyglądała trochę bardziej naturalnie.,
przewijanie myszy
jak widać na: Baltic Training
zobacz kod
autor: Steven Roberts
subtelna animacja przewijania myszy może dać kierunek użytkownikowi, gdy po raz pierwszy wyląduje na stronie internetowej. Chociaż można to osiągnąć za pomocą elementów i właściwości HTML, będziemy używać SVG, ponieważ jest to bardziej odpowiednie do rysowania.
wewnątrz naszego SVG potrzebujemy prostokąta z zaokrąglonymi rogami i okręgu dla elementu, który będziemy animować, używając SVG możemy skalować ikonę do dowolnego rozmiaru, jakiego potrzebujemy.,
teraz stworzyliśmy nasz SVG, musimy zastosować kilka prostych stylów, aby kontrolować rozmiar i pozycję ikony w naszym kontenerze. Zawijaliśmy łącze wokół pliku SVG myszy i ustawiliśmy je u dołu ekranu.
następnie stworzymy naszą animację. Na 0 i 20 procent drogi przez naszą animację chcemy ustawić stan naszego elementu na jego początku. Ustawiając go na 20% drogi przez, pozostanie nieruchomy przez część czasu, gdy powtarza się w nieskończoność.,
musimy dodać punkt początkowy krycia, a następnie przekształcić zarówno pozycję Y, jak i skalę pionową przy znaku 100%, na końcu naszej animacji. Ostatnią rzeczą, jaką musimy zrobić, to zrzucić nieprzezroczystość, aby zniknąć z naszego kręgu.
na koniec zastosujemy animację do okręgu, wraz z właściwością 'transform-origin' i właściwością will-change, aby umożliwić akcelerację sprzętową. Właściwości animacji są dość oczywiste., Funkcja Cubic-bezier timing służy najpierw do odciągnięcia koła przed upuszczeniem go na dno naszego kształtu myszy; dodaje to zabawnego stylu animacji.,
pisanie animowane
Kliknij, aby zobaczyć animację w akcji
jak widać na stronie: Garden Eight
zobacz kod ścieżek i tekstu
autor: Steven Roberts
strona Garden Eight wykorzystuje wspólną technikę animacji, w której tekst wydaje się być napisany. Aby osiągnąć efekt, przechodzimy do SVG. Na początek utworzymy plik SVG., Istnieją dwa podejścia: Konwertuj tekst na ścieżki w celu ich animacji lub użyj tekstu SVG. Oba podejścia mają swoje plusy i minusy.
zacznij od stworzenia naszej animacji klatki kluczowej. Jedyną funkcją, którą musimy wykonać, jest zmiana stroke-dashoffset. Teraz stworzyliśmy naszą animację, musimy zastosować wartości, z których chcemy animować. Ustawiamy stroke-dasharray, który utworzy luki w obrysie. Chcemy, aby nasz obrys był wystarczająco duży, aby pokryć cały element, a na koniec wyrównać myślnik o długość obrysu.,
magia dzieje się, gdy zastosujemy naszą animację. Animując przesunięcie, Wprowadzamy obrys do widoku-tworząc efekt rysowania. Chcemy, aby elementy rysowały jeden po drugim, z pewnym nakładaniem się między końcem rysowania jednego elementu a początkiem rysowania następnego. Aby to osiągnąć, przechodzimy do Sass / SCSS i n-tego typu, aby opóźnić każdą literę o połowę długości animacji, pomnożonej przez pozycję danej litery.,
latające ptaki
Jak widać na: Fournier Père et Fils
zobacz kod dla pojedynczego ptaka lub całego stada
autor: Steven Roberts
zaczynamy od całkowicie prostych linii wektorowych, rysując każdą klatkę naszej animacji, przedstawiając ptaka w innym stanie lotu. Następnie manipulujemy punktami wektorowymi i zaokrąglamy linie i krawędzie. Na koniec wkładamy każdą ramkę do pudełka o jednakowej wielkości i umieszczamy je obok siebie. Wyeksportuj plik jako SVG.
konfiguracja HTML jest naprawdę prosta., Musimy tylko owinąć każdego ptaka w pojemniku, aby zastosować wiele animacji – jeden, aby ptak latać, a drugi, aby przenieść go po ekranie.
stosujemy nasz bird SVG jako tło do naszego bird div I wybieramy rozmiar, jaki chcemy mieć każda klatka. Używamy szerokości, aby z grubsza obliczyć nową pozycję tła. SVG ma 10 komórek, więc mnożymy naszą Szerokość przez 10, a następnie nieznacznie zmieniamy liczbę, aż będzie wyglądać poprawnie.
animacja CSS ma kilka sztuczek, których możesz nie znać., Możemy użyć funkcji animation-timing – aby pokazać obraz w krokach-podobnie jak przesuwanie stron w notatniku, aby nawiązać do animacji.
teraz stworzyliśmy nasz cykl muchowy, nasz ptak obecnie trzepocze skrzydłami, ale nigdzie się nie wybiera. Aby przenieść ją po ekranie, tworzymy kolejną animację klatki kluczowej. Animacja Ta przesunie ptaka po ekranie poziomo, zmieniając jednocześnie pozycję pionową i skalę, aby umożliwić ptakowi bardziej realistyczne meandry.
Po utworzeniu naszych animacji musimy je po prostu zastosować., Możemy utworzyć wiele kopii naszego ptaka i zastosować różne czasy animacji i opóźnienia.
ta animacja jest używana w całej sieci, zamieniając trzy linie w krzyżyk lub ikonę zamknięcia., Do niedawna większość implementacji została osiągnięta przy użyciu elementów HTML, ale w rzeczywistości SVG jest znacznie bardziej odpowiedni do tego rodzaju animacji – nie ma już potrzeby nadmuchiwania kodu przycisków wieloma zakresami.
ze względu na animowaną naturę i SVG oraz jego nawigowalny DOM, kod do wykonania animacji lub przejścia zmienia się bardzo niewiele – technika jest taka sama.
zaczynamy od utworzenia czterech elementów, czy to wewnątrz div lub ścieżek wewnątrz SVG., Jeśli używamy span, musimy użyć CSS, aby umieścić je wewnątrz div; jeśli używamy SVG, to już się tym zajęliśmy. Chcemy umieścić linie 2 i 3 w środku-jedna na drugiej – a Linie 1 i 4 rozmieścić równomiernie powyżej i poniżej, upewniając się, że punkt wyjścia transformacji jest wyśrodkowany.
będziemy polegać na przejściu dwóch właściwości: krycia i obrotu. Przede wszystkim chcemy zanikać linie 1 i 4, które możemy namierzyć za pomocą selektora :nth-child.,
jedyne, co pozostało, to celować w dwie środkowe linie i obracać je o 45 stopni w przeciwnych kierunkach.
Chasing circles
Jak widać na: Better Brand Agency
zobacz kod
autor: Steven Roberts
animowana ikona ładowania składa się z czterech kółek. Okręgi nie mają wypełnienia, ale mają naprzemienne kolory pociągnięć.
w naszym CSS, możemy ustawić kilka podstawowych właściwości dla wszystkich naszych okręgów, a następnie użyć selektora: nth-of-type, aby zastosować inny stroke-dasharray do każdego okręgu.,
następnie musimy stworzyć naszą animację klatki kluczowej. Nasza animacja jest naprawdę prosta: wystarczy obrócić okrąg o 360 stopni. Umieszczając naszą transformację na poziomie 50% animacji, kółko będzie również obracać się z powrotem do swojej pierwotnej pozycji.
Po utworzeniu naszej animacji, musimy ją teraz zastosować do naszych kręgów. Ustawiamy nazwę animacji, czas trwania, liczbę iteracji i funkcję timing. „Łatwość wprowadzania” sprawi, że animacja będzie bardziej zabawna.,
w tej chwili mamy ładowarkę, ale wszystkie elementy obracają się razem w tym samym czasie. Aby to naprawić, zastosujemy pewne opóźnienia. Utworzymy nasze opóźnienia używając pętli Sass for.
@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s;} }
z powodu opóźnień nasz krąg animuje się po kolei, tworząc iluzję kręgów goniących się nawzajem. Jedynym problemem jest to, że gdy strona po raz pierwszy ładuje się, okręgi są statyczne, a następnie zaczynają się poruszać, po kolei. Możemy osiągnąć ten sam efekt przesunięcia, ale zatrzymać niechcianą pauzę w naszej animacji, po prostu ustawiając opóźnienia na wartość ujemną.,
