používá dobře, CSS animace je neuvěřitelně užitečný a výkonný nástroj. Může přidat zájem nebo kreativní vzrušení, nasměrovat oko uživatele, rychle a stručně vysvětlit něco a zlepšit použitelnost. Z tohoto důvodu, v posledních letech viděli stále více a více animací na stránkách a v aplikaci.

v tomto článku zaokrouhlíme některé z nejlepších příkladů animace CSS, které jsme viděli, a ukážeme vám, jak je znovu vytvořit., Přečtěte si řadu hloubkových tutoriálů a inspirativních efektů (a odkazů na jejich kód), které chcete prozkoumat.

co je CSS animace?

CSS animace je metoda animace určitých prvků HTML, aniž by bylo nutné používat procesor a paměť hladový JavaScript nebo Flash. Neexistuje žádný limit na počet nebo frekvenci vlastností CSS, které lze změnit. Animace CSS jsou iniciovány zadáním klíčových snímků pro animaci: tyto klíčové snímky obsahují styly, které prvek bude mít.,

Zatímco se to může zdát omezený, pokud jde o animaci, CSS je ve skutečnosti opravdu mocný nástroj a je schopen produkovat krásně hladké 60fps animace. „Poskytování promyšlených, plynulých animací, které přispívají k smysluplné hloubce vašeho webu, nemusí být obtížné,“ říká vývojář webu front end Adam Kuhn. „Moderní vlastnosti CSS vám nyní předávají téměř všechny nástroje, které budete potřebovat k vytvoření nezapomenutelných zážitků pro vaše uživatele.,“

nejlepší animace stále mají své kořeny v Disney classic 12 principů animace – uvidíte několik zmínek, že v průběhu těchto CSS animace příklady, takže je to stojí mimo kontrolu, že článek, než začnete. Možná budete také chtít prozkoumat naše roundup skvělých animovaných hudebních videí pro další příklady a inspiraci.

zlaté pravidlo je, že váš CSS animace by neměl být přehnané – i malý pohyb může mít velký dopad, a příliš mnoho může být rušivé a dráždivé pro uživatele., Zde jsou naše oblíbené příklady a jak je znovu vytvořit.

Zábavné myši efekt

  • Autor: Donovan Hutchinson

Toto je zábavný efekt, který následuje myši. Mohlo by to být užitečné, když chcete upozornit na prvek na vaší stránce.

potřebujeme velmi málo HTML pro tento účinek:

<div class="demo"> <div class="perspective-container"> <div class="card"></div> </div></div>

za Prvé, jsme postavení demo a nastavit perspektivu pro naše 3D transformace:

Pak styl div chceme animovat:

Zde nastavit pozadí, pak nastavíme overflow na hidden, takže můžeme přidat lesk efekt později., Také jsme nastavili proměnné css, sheenX a sheenY.

tyto lesklé proměnné pomohou umístit efekt sheen. Používáme je v naší kartě po pseudo-elementu:

zde se ujistíme, že pseudo-element je větší než kontejner. To nám dá něco klouzat po horní části karty pomocí transformace.

vlastnost transformace využívá ty proměnné CSS, které jsme nastavili dříve. Nastavíme je pomocí JavaScriptu. Pojďme nastavit JavaScript pro první poslech událostí myši:

dokument.,onmousemove = handleMouseMove;

nyní potřebujeme handleMouseMove funkce zvládnout onmousemove:

Naše funkce má okna výška a šířka a vytváří úhel v osách X a Y. Pak jsme je nastavili na styl transformace naší karty. To dává kartě úhel založený na myši!

další volání funkce pro nastavení pseudo-element pozice:

Naše pseudo-prvek vypadá nejlépe, když se pohybuje v opačném směru myši. K dosažení tohoto cíle vytvoříme číslo mezi -0,5 a 0,5, které se změní v opačném směru výpočtem poměru o -1.,

vynásobíme toto číslo 800, protože chceme, aby se zvětšilo až na maximum 400px, což je, jak daleko nastavíme pseudo-prvek sheen mimo kartu.

nakonec nastavíme tyto hodnoty offsetu na naše vlastnosti proměnné CSS a renderer prohlížeče provede zbytek.

nyní máme kartu, která se otočí k naší myši, zatímco efekt lesku se pohybuje v opačném směru nahoře. To vytváří pěkný, poutavý efekt.,

velké odhalení

  • Autor: Adam Kuhn

Animované obsahu odhalit účinky se zdají být velmi populární právě teď, a správně používány, mohou zachytit uživatele soustředit se a zapojit své publikum. Už jste to viděli: blok barvy roste z jedné nebo druhé strany vodorovně nebo svisle, a pak ustoupí na opačnou stranu, tentokrát odhalující nějaký text nebo obrázek pod ním. Je to koncept, který se může zdát složitý, ale opravdu se spoléhá na pár věcí.,

nejprve nastavíme umístění prvku (stáhněte si celý kód zde) – definujte jej jako relativní(v tomto případě selže pouze statická). V textových případech je nejlepší povolit automatickou výšku a šířku, i když trochu polstrování neublíží. Definujeme také původ transformace, v případě nadřazeného prvku chceme použít výchozí pozici. Protože chceme, aby byl prvek zpočátku skrytý, použijeme k jeho zmenšení transformaci měřítka podél příslušné osy.

Další, pseudo prvek pro maskování našeho rodiče, nastavení původu transformace na opačnou možnost., Nakonec propojte animace pomocí funkcí časování nebo zpoždění, abyste je kompenzovali.

Poznámka: animace nadřazeného a pseudo prvku jsme kompenzovali zpožděním, které říká, že pole, které skrývá náš text, odhalí až poté, co se samotný prvek plně zmenšil. Podívejte se na kódový kód níže.

Rozložit na

  • Autor: Adam Kuhn

Jakmile jste začali hromadit slušné knihovny různých uvolňování fragmentů, je čas se podívat do jiných způsobů, jak zvýšit hloubku vašich animace, a jeden z nejlepších způsobů, jak je kompenzovat své animované prvky.,

je příliš běžné, že spouštěč JavaScriptu je nastaven tak, aby inicioval spoustu animací založených na poloze posouvání, pouze aby našel všechny položky, které se efektivně pohybují v tandemu. Naštěstí CSS sám poskytuje jednoduchou vlastnost, která může dělat (nebo zlomit) animovaný zážitek: animace-zpoždění.

řekněme například, že máme mřížku obrázků, které chceme animovat do rámečku,když uživatel posouvá. Existuje řada způsobů, jak bychom to mohli spustit, s největší pravděpodobností přidáním tříd k prvkům při vstupu do výřezu., To může být docela těžký výtah v prohlížeči, nicméně, a lze se mu vyhnout pouhým přidáním jedné třídy do prvku kontejneru a definováním zpoždění animace na dětských prvcích.

jedná se o obzvláště dobrý případ použití pro předzpracovatele, jako je SCSS nebo méně, které nám umožňují používat @For loop k iteraci prostřednictvím každého prvku.

#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; }} }}

Zde uvidíte s SCSS jsme schopni procházet každý :nth-of-type selector, a pak aplikovat animaci, zpoždění na základě každé dítě element má číselnou hodnotu., V tomto případě si všimnete, že rozdělíme naše načasování, abychom snížili každý přírůstek na zlomek sekundy. Zatímco kompenzování animovaných prvků může vaší animaci vyvolat emoce, příliš velké zpoždění může způsobit, že se bude cítit nesouvislá. Podívejte se na tento kódový kód níže.

Squigglevision

  • Autor: Adam Kuhn

SVG filtry poskytují skvělý způsob, jak dosáhnout přirozené, ručně kreslené pocit a uniknout některé ploché-pocit omezení vykreslování CSS sám. Jejich animace může dále zvýšit účinek.

případ v bodě: Squigglevision., Jo, to není technický termín známý většině animátorů, ale určitě jste ho viděli v karikaturách. Myšlenka je, že okraje tyto animované prvky jsou nejen poněkud zubaté a hrubé tesané, ale tyto ostré hrany rychle variate, snímek po snímku, což je pocit, jako by se byl vytrhl ze stránek skicák a přivedl k životu.

k dosažení tohoto efektu můžeme na naší stránce zahrnout SVG s více filtry a mírnými změnami úrovní turbulence pro každého. Dále nastavíme časovou osu animace a zavoláme každý filtr do vlastního klíčového snímku., Je důležité hrát s načasování, trvání, jak jsme předvídat, animace se bude cítit, „nervózní“, ale nechci, aby to tak pomalu, jak se cítit rozložit, nebo tak rychle, jak se cítit se jako blázen.

za tímto účelem je důležité si uvědomit, že CSS postrádá schopnost plynule přecházet mezi filtry SVG, protože neexistuje způsob, jak přistupovat k vlastnostem, jako je turbulence a měřítko, takže by se tyto typy animací měly vždy očekávat, že budou trhané.,

Omílání písma

  • Jak je vidět na: Hra Roku
  • Autor: Leon hnědá

Google Hra Roku nabízí hravé CSS animace na úvodní stránce, s titulem slova padat a narážet jeden do druhého. Takhle se to dělalo.

prvním krokem je definování dokumentu webové stránky pomocí HTML. Skládá se z kontejneru HTML dokumentu, který ukládá část hlavy a těla., Zatímco sekce head se používá k načtení externích zdrojů CSS a JavaScript, tělo se používá k ukládání obsahu stránky.

obsah stránky se skládá ze tří titulních značek h1, které zobrazí různé varianty animačního efektu. Zatímco do těchto značek lze vložit libovolný text, jejich animace je definována jmény v atributu třídy. Nastavení prezentace a animace pro tyto názvy tříd budou definovány v CSS později.

dále vytvořte nový soubor s názvem ‚ kód.js‘., Chceme najít všechny prvky stránky s třídou animate a vytvořit seznam polí představující každé slovo vnitřního textu. Počáteční zpoždění animace je také definováno v tomto kroku. Obsah stránky není k dispozici, dokud stránka není plně načtena, takže tento kód je umístěn uvnitř posluchače událostí zatížení okna.

obsah slov v položkách animace musí být obsažen uvnitř prvku span. K tomu, stávající HTML obsahu je reset na prázdné, pak smyčka se používá, aby se slovo v označené „slova“ seznam prvku span., Navíc je použit styl animacezpoždění-vypočteno ve vztahu k počátečnímu zpoždění (specifikovanému níže) a pozici indexu slova.

vytvořte nový soubor s názvem styly.element. Nyní nastavíme pravidla prezentace, která budou součástí každého prvku slova v animaci, řízeného jejich značkou span. Displej jako blok, v kombinaci s skružovatelné zarovnání textu, bude mít za následek každé slovo se objeví na samostatném řádku vodorovně zarovnán do středu nádoby. Relativní polohování bude použito k animaci ve vztahu k jeho poloze text-flow.,

.animate span{display: block;position: relative;text-align: center;}

animační prvky, které mají třídu dozadu a dopředu, mají na ně specifickou animaci. Tento krok definuje animaci, která se použije na prvky span, jejichž Nadřazený kontejner má jak třídu animate, tak i dozadu nebo dopředu.

Všimněte si, jak neexistuje žádný prostor mezi animovaným a zpětným odkazem třídy, což znamená, že nadřazený prvek musí mít obojí.

smíšená animace je definována pomocí stejných nastavení používaných pro animace dopředu a dozadu., Namísto použití animací na každé dítě rodiče se volič nth-child používá k použití střídavých nastavení animace. Zpětná animace se aplikuje na každé sudé dítě, zatímco animace vpřed se aplikuje na každé dítě s lichým číslem.

animace, které jsme právě vytvořili, jsou vytvořeny s počáteční “ z “ výchozí polohy, bez vertikální polohy nebo nastavení rotace. Pozice “ to “ je konečný stav animace, která nastavuje prvky s nastavenou svislou polohou a stavem otáčení., Pro obě animace se používají mírně odlišná nastavení ukončení, aby se zabránilo nečitelnosti textu v důsledku překrytí smíšených animací.

Flip book

  • autor: Adam Kuhn

při animaci pomocí CSS je někdy nutný mrtvý jednoduchý přístup. A existuje jen málo jednodušších animačních metod než flip book. Pomocí kroků () jako naší funkce časování jsme schopni tento efekt replikovat. I když to může znít trhaně a přímo v rozporu s naším posláním udržovat plynulost, se správným stimulací se může cítit stejně hladce organicky.

tak jak to funguje?, Definujeme funkci uvolňování animace pomocí několika dalších parametrů-říkáme naší animaci, kolik kroků je potřeba a na kterém místě během prvního kroku bychom chtěli začít (začátek, konec) – vypadat trochu takto, například kroky (10, start).

v rámci našich klíčových snímků nyní můžeme určit koncový bod naší animace: pro tento příklad předpokládejme, že naše animace je dlouhá 10 sekund a používáme 10 kroků. V tomto případě bude každý krok dlouhý jednu sekundu a okamžitě se přesune na následující jeden druhý snímek bez přechodu mezi nimi.,

opět se zdá, že to letí tváří v tvář plynulosti, ale tady je místo, kde mohou stupňovité animace opravdu zářit. Můžeme postupně iterovat přes list sprite a animovat rámeček po snímku stejně jako flip book. Definováním rámy stejné velikosti, ale jejich sestavování na jeden horizontální (nebo vertikální) snímku, můžeme nastavit tento obrázek jako prvek pozadí a definovat pixelů nebo procento pozadí poloze, jako koncový bod pro naše animace, což umožňuje jeden krok pro každý snímek., List sprite pak posune a naplní rámeček prvku po snímku čerstvým obrázkem na pozadí na základě jeho polohy.

podívejme se na příklad. V tomto případě se některé sady animovaných nohou připojily k některým textovým znakům. Za prvé, budeme definovat naše animace název, doba trvání, počet kroků, startovní pozici a iterací: 

animation:runner 0.75s steps(32, end) infinite;

Opět, na vědomí, že doba trvání je relativně rychlé na méně než jednu sekundu pro celkem 32 snímků., Další, budeme definovat naše klíčové snímky: 

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:-1280px 50%; }}

Všimněte si, že vertikální umístění obrazu je konzistentní po celou dobu, což nám říká, že skřítci jsou vodorovně natažené přes obraz, který je 1280px v celkové šířce. Jak jsme definovali celkem 32 snímků pro tento obrázek,můžeme odvodit, že každý snímek by měl být široký 40px. Podívejte se na tento kódový kód níže.

je důležité si uvědomit, že velký list sprite může být potenciálně silným přetahováním o výkon, takže nezapomeňte velikost a komprimovat obrázky., S dobře vytvořeným listem sprite a vhodnou dobou animace máte nyní hladkou animaci schopnou zprostředkovat složité pohyby.

Vyfukování bublin

  • Jak je vidět na: 7UP
  • Zobrazit kód
  • Autor: Steven Roberts

CSS bublina animace, která funkce na 7UP je krásný příklad nesoucí značku téma do designu webových stránek. Animace se skládá z několika prvků: SVG ‚kreslení‘ bublin a pak dvě animace aplikované na každou bublinu.,

první animace změny krytí bublině a pohybuje svisle v zobrazení pole; druhý vytváří kmitání efekt pro přidané realismu. Kompenzace jsou řešeny cílením každé bubliny a použitím jiné doby animace a zpoždění.

pro vytvoření našich bublin budeme používat SVG. V našem SVG vytváříme dvě vrstvy bublin: jednu pro větší bubliny a jednu pro menší bubliny. Uvnitř SVG umístíme všechny naše bubliny ve spodní části okna.,

abychom mohli na naše svg použít dvě samostatné animace, a to jak s využitím vlastnosti transformace, musíme použít animace na samostatné prvky. <g> element v SVG mohou být použity jako div v HTML; musíme zabalit každý z našich bublin (které jsou již ve skupině) ve skupině značky.

<g> <g transform="translate(10 940)"> <circle cx="35" cy="35" r="35"/> </g></g>

CSS má výkonný animační engine a opravdu jednoduchý kód, aby vytvořil složité animace., Začneme pohybem bublin po obrazovce a změnou jejich neprůhlednosti, abychom je na začátku a na konci animace vybledli dovnitř a ven.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); }}

s cílem vytvořit kmitání efektu, my prostě muset přesunout (nebo přeložit) bublina vlevo a vpravo, jen správné množství – příliš mnoho způsobí, že se animace vypadat příliš jaunting a odpojen, zatímco příliš málo, půjde většinou bez povšimnutí. Experimentování je klíčové při práci s animací.,

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

aby bylo možné použít animaci k naší bubliny, budeme používat skupin jsme použili dříve a pomocí nth-of-type identifikovat každou bublinu skupiny individuálně. Začneme tím, že použijeme hodnotu krytí na bubliny a vlastnost will-change, abychom využili hardwarovou akceleraci.

.bubbles-large > g { opacity: 0;will-change: transform, opacity;}.bubbles-large g:nth-of-type(1) {...}....bubbles-small g:nth-of-type(10) {...}

chceme, aby všechny animace časy a zpoždění během několika sekund sebe a opakovat nekonečně. Nakonec použijeme funkci časování ease-in-out na naši kolísavou animaci, aby vypadala trochu přirozeněji.,

Posouvání myši

  • Jak je vidět na: Baltské Školení
  • Zobrazit kód
  • Autor: Steven Roberts

jemné posouvání myši animace může dát směr pro uživatele, když se poprvé přistát na webové stránky. I když to lze provést pomocí HTML prvků a vlastností, budeme používat SVG, protože to je vhodnější pro kreslení.

Uvnitř SVG potřebujeme obdélník se zaoblenými rohy a kruhem pro prvek budeme animovat, pomocí SVG můžeme měřítku ikonu na libovolnou velikost, kterou potřebujeme.,

nyní jsme vytvořili SVG, musíme použít několik jednoduchých stylů, abychom mohli ovládat velikost a polohu ikony v našem kontejneru. Zabalili jsme odkaz kolem myši SVG a umístili jej do spodní části obrazovky.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);}.mouse { max-width: 2.5rem; width: 100%; height: auto;}

dále vytvoříme naši animaci. Na 0 a 20 procent cesty naší animací chceme nastavit stav našeho prvku tak, jak začíná. Nastavením na 20% cesty, zůstane stále po část času, kdy se nekonečně opakuje.,

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); }}

Musíme přidat v krytí počáteční bod a pak se transformovat do pozice Y a svislé měřítko na 100% hranici, konec naší animace. Poslední věc, kterou musíme udělat, je upustit od neprůhlednosti, abychom zmizeli z našeho kruhu.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; }}

nakonec použijeme animaci na kruh spolu s vlastností „transform-origin“ a vlastností will-change, která umožní hardwarovou akceleraci. Vlastnosti animace jsou poměrně samozřejmé., Funkce časování cubic-bezier se používá k prvnímu zatažení kruhu zpět, než jej upustí na dno tvaru myši; to přidává animaci hravý pocit.,

Animované psaní

Klikněte pro zobrazení animace v akci
  • Jak je vidět na: Zahradní Osm
  • Zobrazit kód pro cesty a textu
  • Autor: Steven Roberts

Zahradní Osm webové stránky používá běžné animační technika, při které se text zdá být písemné. Abychom dosáhli tohoto efektu, obrátíme se na SVG. Nejprve vytvoříme SVG., Existují dva přístupy: převeďte text na cesty, abyste je animovali nebo použili text SVG. Oba přístupy mají své klady a zápory.

Začněte vytvořením naší animace klíčových snímků. Jedinou funkcí, kterou musíme provést, je změna zdvihu-dashoffset. Nyní jsme vytvořili naši animaci, musíme použít hodnoty, ze kterých chceme animovat. Nastavíme zdvih-dasharray, který vytvoří mezery v tahu. Chceme nastavit náš zdvih tak, aby byl dostatečně velký, aby pokryl celý prvek a nakonec kompenzoval pomlčku délkou zdvihu.,

kouzlo se stane, když použijeme naši animaci. Animací offsetu zobrazujeme zdvih-vytváříme kreslicí efekt. Chceme, aby prvky kreslily jeden po druhém, s určitým překrytím mezi koncem kreslení jednoho prvku a začátkem kreslení dalšího. Abychom toho dosáhli, obrátíme se na Sass/SCSS a nth-of-type, abychom odložili každé písmeno o polovinu délky animace vynásobené polohou tohoto konkrétního dopisu.,

Létající ptáci

  • Jak je vidět na: Fournier Père et Fils
  • Zobrazit kód pro jeden pták nebo celé stádo
  • Autor: Steven Roberts

začneme s úplně rovnou vektorových čar, kreslení každý snímek naší animace, znázorňující ptáka v jiném stavu letu. Poté manipulujeme s vektorovými body a kolem čar a okrajů. Nakonec vložíme každý rám do stejně velké krabice a umístíme je vedle sebe. Exportovat soubor jako SVG.

nastavení HTML je opravdu jednoduché., Potřebujeme jen zabalit každého ptáka do kontejneru, abychom mohli použít více animací – jeden, aby pták létal a druhý ho pohyboval po obrazovce.

<div class="bird-container"> <div class="bird"></div></div>

Jsme použít náš pták SVG jako pozadí náš ptáček div a vybrat velikost chceme, aby každý snímek. Šířku použijeme ke zhruba výpočtu nové pozice na pozadí. SVG má 10 buněk, takže vynásobíme naši šířku 10 a pak mírně změníme číslo, dokud nebude vypadat správně.

CSS animace má několik triků, které nemusí být vědomi., Můžeme využít animace-časování-funkce zobrazí obrázek v krocích – podobně jako máchal prostřednictvím stránek v notebooku se zmiňovat animace.

nyní jsme vytvořili náš létající cyklus, náš pták v současné době mává křídly, ale nikam nevede. Abychom ji mohli přesunout přes obrazovku, vytvoříme další animaci klíčových snímků. Tato animace bude pohybovat ptáka po obrazovce vodorovně a zároveň mění svislou polohu a měřítko, aby pták meandrovat přes realističtěji.

jakmile jsme vytvořili naše animace, prostě je musíme použít., Můžeme vytvořit více kopií našeho ptáka a použít různé doby animace a zpoždění. 

.bird--one { animation-duration: 1s; animation-delay: -0.5s;}.bird--two { animation-duration: 0.9s; animation-delay: -0.75s;}

Cross můj hamburger

  • Jak je vidět na: Lepší Značka Agentury
  • Zobrazit kód pro rozpětí a SVG
  • Autor: Steven Roberts

Tato animace se používá po celém webu, zapnutí tři čáry do kříže nebo ikonu zavřít., Až poměrně nedávno, většina implementací bylo dosaženo pomocí HTML prvků, ale ve skutečnosti SVG je mnohem vhodnější pro tento druh animace – tam je již třeba udit vaše tlačítka kód s více rozsahy.

Vzhledem k animatable přírody a SVG a jeho splavných DOM, kód k dosažení animace či přechodu se mění jen velmi málo – technika je stejná.

začneme vytvořením čtyř prvků, ať už se rozprostírá uvnitř div nebo cest uvnitř SVG., Pokud používáme rozpětí, musíme použít CSS k jejich umístění uvnitř div; pokud používáme SVG, je to již postaráno. Chceme umístit čáry 2 a 3 ve středu – jeden na druhém – zatímco rozestupy čar 1 a 4 rovnoměrně nad a pod, ujistěte se, že střed transformace původu.

budeme se spoléhat na přechod dvou vlastností: krytí a rotace. Nejprve chceme vyblednout řádky 1 a 4, na které se můžeme zaměřit pomocí voliče: nth-child.,

.menu-icon.is-active {element-type}:nth-child(1),.menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

jediné, co zbývá udělat, je zaměřit se na dvě střední čáry a otočit je o 45 stupňů v opačných směrech.

Honí kruhy

  • Jak je vidět na: Lepší Značka Agentury
  • Zobrazit kód
  • Autor: Steven Roberts

animované nakládání ikona se skládá ze čtyř kruhů. Kruhy nemají výplň,ale mají střídavé barvy.

v našem CSS můžeme nastavit některé základní vlastnosti pro všechny naše kruhy a poté pomocí selektoru :nth-of-type aplikovat na každý kruh jiný tah-dasharray.,

dále musíme vytvořit naši animaci klíčových snímků. Naše animace je opravdu jednoduchá: vše, co musíme udělat, je otočit kruh o 360 stupňů. Umístěním naší transformace na 50% značku animace se kruh také otočí zpět do původní polohy.

@keyframes preloader { 50% { transform: rotate(360deg); } }

díky vytvořené animaci ji nyní musíme aplikovat na naše kruhy. Nastavili jsme název animace; doba trvání; počet iterací a funkce časování. „Ease-in-out“ dodá animaci hravější pocit.,

v současné době máme náš nakladač,ale všechny prvky se otáčejí současně. Abychom to napravili, použijeme nějaké zpoždění. Budeme vytvářet naše zpoždění pomocí Sass pro smyčku.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s;} }

vzhledem ke zpoždění náš kruh nyní oživuje a vytváří iluzi kruhů, které se navzájem pronásledují. Jediným problémem je, že když se stránka nejprve načte, kruhy jsou statické, pak se začnou pohybovat jeden po druhém. Můžeme dosáhnout stejného ofsetového efektu, ale zastavit nežádoucí pauzu v naší animaci jednoduše nastavením zpoždění na zápornou hodnotu.,

animation-delay: -#{$i * 0.15}s;

Next page: More CSS animation examples to explore