används väl, CSS animation är ett otroligt användbart och kraftfullt verktyg. Det kan lägga till intresse eller kreativ spänning, rikta användarens öga, förklara något snabbt och kortfattat och förbättra användbarheten. Av den anledningen har de senaste åren sett mer och mer animering på webbplatser och i app.

i den här artikeln samlar vi in några av de coolaste CSS-animationsexemplen vi har sett och visar dig hur du återskapar dem., Läs vidare för en rad djupgående handledning och inspirerande effekter (och länkar till deras kod) att utforska.

Vad är CSS-animering?

CSS animation är en metod för att animera vissa HTML-element utan att behöva använda processor och minne-hungrig JavaScript eller Flash. Det finns ingen gräns för antalet eller frekvensen av CSS-egenskaper som kan ändras. CSS-animeringar initieras genom att ange keyframes för animeringen: dessa keyframes innehåller de stilar som elementet kommer att ha.,

även om det kan verka begränsat när det gäller animering, CSS är faktiskt ett riktigt kraftfullt verktyg och kan producera vackert släta 60fps animationer. ”Att leverera tankeväckande, flytande animationer som bidrar meningsfullt djup till din webbplats behöver inte vara svårt”, säger front end webbutvecklare Adam Kuhn. ”Moderna CSS-egenskaper ger dig nu nästan alla verktyg du behöver för att skapa minnesvärda upplevelser för dina användare.,”

de bästa animationerna har fortfarande sina rötter i Disneys klassiska 12-principer för animering-du ser flera omnämnanden av det genom dessa CSS-animeringsexempel, så det är värt att kolla in den artikeln innan du börjar. Du kanske också vill utforska vår roundup av stora animerade musikvideor för ytterligare exempel och inspiration.

den gyllene regeln är att dina CSS – animationer inte ska överblåsas-även en liten rörelse kan ha stor inverkan, och för mycket kan vara distraherande och irriterande för användarna., Här är våra favoritexempel och hur man återskapar dem.

Fun mouse effect

  • författare: Donovan Hutchinson

detta är en rolig effekt som följer musen runt. Det kan vara användbart när du vill uppmärksamma ett element på din sida.

vi behöver väldigt lite HTML för denna effekt: 

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

först placerar vi demo och ställer in perspektiv för vår 3D-Transformation:

styla sedan div vi vill animera:

här ställer vi in en bakgrund, så ställer vi överflöde till dolt så att vi kan lägga till en glanseffekt senare., Vi ställer också in CSS-variabler, sheenX och sheenY.

dessa sheenvariabler hjälper till att placera sheen-effekten. Vi använder dem i vårt korts efter pseudo-element:

Här ser vi till att pseudo-elementet är större än behållaren. Detta kommer att ge oss något att glida runt på toppen av kortet med transform.

egenskapen transform använder sig av de CSS-variabler som vi satte tidigare. Vi kommer att ställa in dem med JavaScript. Låt oss ställa in JavaScript för att först lyssna på mushändelser:

dokument.,onmousemove = handleMouseMove;

vi behöver nu en handleMouseMove-funktion för att hantera onmousemove:

vår funktion tar fönsterhöjden och bredden och skapar en vinkel på X-och Y-axlarna. Vi ställer sedan in dessa till omvandlingsstilen på vårt kort. Detta ger kortet en vinkel baserad på musen!

vi kallar nästa funktion för att ställa in pseudoelementets position:

vårt pseudoelement ser bäst ut när det rör sig i motsatt riktning mot musen. För att uppnå detta skapar vi ett tal mellan -0,5 och 0,5 som ändras i motsatt riktning genom att beräkna förhållandet med -1.,

vi multiplicerar detta nummer med 800 som vi vill att det ska skala upp till högst 400px, vilket är hur långt vi ställer in skenet pseudo-element utanför kortet.

slutligen ställer vi in dessa offsetvärden till våra CSS-variabelegenskaper, och webbläsarens renderare gör resten.

Vi har nu ett kort som vänder sig mot vår mus medan glanseffekten rör sig i motsatt riktning på toppen. Detta skapar en fin, iögonfallande effekt.,

the big reveal

  • författare: Adam Kuhn

animerat innehåll avslöjar effekter verkar vara ganska populär just nu, och används korrekt kan de fånga användarfokus och engagera din publik. Du har sett det här förut: ett färgblock växer från en sida eller en annan horisontellt eller vertikalt och återgår sedan till motsatt sida, den här gången avslöjar någon text eller en bild under. Det är ett koncept som kan verka knepigt men verkligen bygger på bara några saker.,

först ställer vi in vår elementpositionering (ladda ner hela koden här) – definiera den som relativ (endast statisk kommer att misslyckas i det här fallet). I textfall är det bäst att tillåta automatisk höjd och bredd, även om lite stoppning inte skadar. Vi definierar också ett transformationsursprung, när det gäller det överordnade elementet vill vi använda startpositionen. Eftersom vi vill att elementet dolt i början, använder vi en skalomvandling längs lämplig axel för att krympa den.

Nästa, ett pseudo-element för att maskera vår förälder, ställer in omvandlingsursprunget till motsatt alternativ., Slutligen sträng ihop animationerna, med hjälp av antingen tidsfunktionerna eller fördröjningarna för att kompensera varje.

Observera att vi har kompenserat överordnad och pseudoelementets animationer med en fördröjning som berättar om rutan som döljer vår text för att avslöja den först efter att själva elementet har scaled fullständigt i sikte. Kolla in koden nedan.

Stagger på

  • författare: Adam Kuhn

När du har börjat ackumulera ett anständigt bibliotek med olika lättnader, är det dags att titta på andra sätt att förbättra djupet på dina animationer, och ett av de bästa sätten är att kompensera dina animerade element.,

det är alltför vanligt att en JavaScript-utlösare är inställd på att initiera en massa animationer baserat på rullningsposition, bara för att hitta alla objekt som rör sig effektivt i tandem. Lyckligtvis CSS själv ger en enkel egenskap som kan göra (eller bryta) din animerade upplevelse: animation-fördröjning.

låt oss till exempel säga att vi har ett rutnät av bilder som vi vill animera in i ramen när användaren rullar. Det finns ett antal sätt vi kan utlösa detta, troligen lägga till klasser till elementen när de går in i visningsområdet., Detta kan vara ganska tung hiss på webbläsaren, dock, och kan undvikas genom att helt enkelt lägga till en enda klass till en container element och definiera animation förseningar på barn element.

detta är ett särskilt bra användningsfall för preprocessorer som SCSS eller mindre, vilket gör att vi kan använda en @för slinga för att iterera genom varje element.

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

här ser du med SCSS vi har möjlighet att slinga genom varje :nth-of-type väljare, sedan tillämpa en animation fördröjning baserat på varje barn elementets numeriska värde., I det här fallet noterar du att vi delar upp vår timing för att minska varje ökning till en bråkdel av en sekund. Samtidigt kompensera dina animerade element kan ge känslor till din animation, för mycket fördröjning kan få det att känna sig osammanhängande. Kolla in denna CodePen nedan.

Squigglevision

  • författare: Adam Kuhn

SVG filter ger ett bra sätt att uppnå en naturlig, handritad känsla och fly några av de platt känsla rendering begränsningar av CSS ensam. Animera dem kan ytterligare förbättra effekten.

fall i punkt: Squigglevision., Ja, det här är inte en teknisk term som är känd för de flesta animatörer, men du har säkert sett den anställd i teckningar. Tanken är att kanterna på dessa animerade element inte bara är något skarpa och grova, men dessa grova kanter varierar snabbt, ram för RAM, vilket gör att de känner sig som om de har blivit rippade från sidorna i en skissbok och väckt till liv.

för att uppnå denna effekt kan vi inkludera en SVG på vår sida med flera filter och små variationer i turbulensnivåer för varje. Nästa, vi ska ställa in vår animation tidslinje, ringer varje filter i sin egen nyckelruta., Det är viktigt att spela med timing varaktighet som vi förutse animeringen kommer att känna ”nervös” men inte vill ha det så långsamt att känna sig osammanhängande eller så fort att känna sig galen.

För det ändamålet är det viktigt att notera att CSS saknar förmågan att smidigt övergå mellan SVG-filter eftersom det inte finns något sätt att komma åt egenskaper som turbulens och skala, så dessa typer av animationer bör alltid förväntas vara hackiga.,

tumlande bokstäver

  • som ses på: Game Of The Year
  • författare: Leon Brown

Googles Game of the Year har en lekfull CSS animation på hemsidan, med titeln ord tumlande och stöta på varandra. Så här gick det till.

det första steget är att definiera webbplatsdokumentet med HTML. Den består av HTML-dokumentbehållaren, som lagrar ett huvud-och kroppssektion., Medan huvudavsnittet används för att ladda externa CSS-och JavaScript-resurser, används kroppen för att lagra sidinnehållet.

sidinnehållet består av tre H1-titeltaggar som visar de olika variationerna av animeringseffekten. Medan någon text kan infogas i dessa taggar definieras deras animering av namnen i klassattributet. Inställningarna för presentation och animering för dessa klassnamn kommer att definieras i CSS senare.

skapa sedan en ny fil som heter ” kod.js’., Vi vill hitta alla sidelement med animate-klassen och skapa en array-lista som representerar varje ord i den inre texten. Den initiala animeringsfördröjningen definieras också i detta steg. Sidans innehåll är inte tillgängligt förrän sidan har laddats helt, så den här koden placeras inuti fönstrets load event listener.

ordinnehållet i animationsobjekten måste finnas inuti ett spännelement. För att göra detta återställs det befintliga HTML-innehållet till tomt, då används en slinga för att göra ordet i det identifierade ordet ” ord ” Lista ett spännelement., Dessutom tillämpas en animationDelay-stil-beräknad i förhållande till den ursprungliga fördröjningen (specificerad nedan) och ordets indexposition.

skapa en ny fil som heter styles.css. Nu ställer vi in presentationsreglerna som kommer att vara en del av varje ordelement i animationen, styrd av deras span-tagg. Display som block, kombinerat med centrerad textjustering, kommer att resultera i att varje ord visas på en separat rad horisontellt i linje med mitten av behållaren. Relativ positionering kommer att användas för att animera i förhållande till dess textflödesposition.,

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

animeringselement som har klassen bakåt och framåt har en specifik animering tillämpad på dem. Detta steg definierar animeringen som ska tillämpas på spännelement vars överordnade behållare har både animera och bakåt eller framåt klass.

Observera hur det inte finns något utrymme mellan referens för animerad och bakåtklass, vilket betyder att det överordnade elementet måste ha båda.

den blandade animationen definieras med samma inställningar som används för animationerna framåt och bakåt., Istället för att tillämpa animationerna på varje barn i föräldern används nth-child selector för att tillämpa alternerande animeringsinställningar. Den bakåtanimering tillämpas på varje jämnt nummer barn, medan framåt animation tillämpas på varje udda nummer barn.

animationerna vi just skapat är gjorda med en initial ”från” startposition, utan vertikal position eller rotationsjustering. Läget ”till” är animeringens slutliga tillstånd, som ställer in elementen med ett justerat vertikalt läge och rotationsläge., Något olika slutinställningar används för båda animationerna för att undvika att texten blir oläslig på grund av överlappning i blandade animationer.

Flip bok

  • författare: Adam Kuhn

När animera med CSS ibland en död enkel strategi är nödvändigt. Och det finns få enklare animeringsmetoder än flip-boken. Med hjälp av steg () som vår tidsfunktion kan vi replikera denna effekt. Även om detta kan låta hackigt och direkt motsäga vårt uppdrag att upprätthålla fluiditet, med rätt pacing kan det kännas lika sömlöst organiskt.

Så hur fungerar det?, Vi definierar vår animationsavlastningsfunktion med bara några ytterligare parametrar-berättar för vår animering hur många steg som behövs och vid vilken tidpunkt under det första steget vill vi börja (start, slut) – ser lite ut så här, till exempel steg (10, start).

inom våra keyframes kan vi nu utse en slutpunkt till vår animering: låt oss anta att vår animering är 10 sekunder lång och vi använder 10 steg. I det här fallet kommer varje steg att vara en sekund lång, omedelbart flytta till följande en sekund ram utan övergång mellan.,

igen verkar detta flyga i ansiktet av fluiditet, men här är där stegade animationer verkligen kan lysa. Vi kan stegvis iterera genom en sprite ark och animera ram för RAM precis som en flip bok. Genom att definiera ramar av samma storlek men sammanställa dem på en enda horisontell (eller vertikal) bild, kan vi ställa in den här bilden som en elementbakgrund och definiera en pixel eller procentuell bakgrundsposition som en slutpunkt till vår animering, vilket möjliggör ett enda steg för varje ram., Sprite-arket skiftar sedan och fyller elementramen för ram med en ny bakgrundsbild baserat på dess position.

Låt oss ta en titt på ett exempel. I det här fallet läggs vissa uppsättningar animerade ben till några texttecken. Först definierar vi vårt animationsnamn, varaktighet, stegräkning, startposition och iteration count: 

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

igen, notera att varaktigheten är relativt snabb på mindre än en hel sekund för 32 totala ramar., Därefter definierar vi våra keyframes: 

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

Observera att bildens vertikala positionering är konsekvent i hela bilden, vilket berättar att spriterna sträcker sig horisontellt över bilden, vilket är 1280px i total bredd. Som vi har definierat 32 totala ramar för den bilden kan vi dra slutsatsen att varje ram ska vara 40px bred. Kolla in denna Codepen nedan.

det är viktigt att notera att ett stort sprite-ark potentiellt kan vara ett allvarligt drag på prestanda, så var noga med att storlek och komprimera bilder., Med en väl utformad sprite blad och en lämplig animation varaktighet du nu har en smidig animation kunna förmedla komplexa rörelser.

blåser bubblor

  • som ses på: 7UP
  • visa koden
  • författare: Steven Roberts

CSS bubble animation som har på 7UP är ett vackert exempel på att bära ett varumärke Tema Genom in i webbdesign. Animationen består av några element: SVG ’ritning’ av bubblorna och sedan två animationer tillämpas på varje bubbla.,

den första animeringen ändrar bubblans opacitet och flyttar den vertikalt i visningsrutan; den andra skapar wobbling-effekten för extra realism. Förskjutningarna hanteras genom att rikta varje bubbla och tillämpa en annan animation varaktighet och fördröjning.

för att skapa våra bubblor kommer vi att använda SVG. I vår SVG skapar vi två lager bubblor: en för de större bubblorna och en för de mindre bubblorna. Inuti SVG placerar vi alla våra bubblor längst ner i rutan.,

för att kunna tillämpa två separata animeringar på våra SVGs, både med hjälp av transformationsegenskapen, måste vi tillämpa animationerna på separata element. <g> – elementet i SVG kan användas ungefär som en div I HTML; vi måste linda var och en av våra bubblor (som redan finns i en grupp) i en grupptagg.

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

CSS har en kraftfull animationsmotor och väldigt enkel kod för att producera komplexa animationer., Vi börjar med att flytta bubblorna upp på skärmen och ändra deras opacitet för att blekna dem in och ut i början och slutet av animationen.

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

för att skapa en wobbling – effekt behöver vi helt enkelt flytta (eller översätta) bubblan åt vänster och höger, med precis rätt mängd-för mycket kommer att få animationen att se för jaunting och bortkopplad, medan för lite kommer att gå mestadels obemärkt. Experiment är nyckeln till när man arbetar med animering.,

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

för att applicera animationen på våra bubblor använder vi de grupper vi använde tidigare och hjälp av Nth-of-type för att identifiera varje bubbla grupp individuellt. Vi börjar med att applicera ett opacitetsvärde på bubblorna och egenskapen will-change för att utnyttja hårdvaruacceleration.

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

vi vill behålla alla animeringstider och förseningar inom några sekunder av varandra och ställa dem att upprepa oändligt. Slutligen tillämpar vi ease-in-out timing-funktionen till vår wobble-animering för att få det att se lite mer naturligt ut.,

rullning mus

  • som ses på: Baltic utbildning
  • visa koden
  • författare: Steven Roberts

en subtil rullning mus animation kan ge riktning till användaren när de först landar på en webbplats. Även om detta kan åstadkommas med hjälp av HTML-element och egenskaper, kommer vi att använda SVG eftersom detta är mer lämpade för ritning.

inuti vår SVG behöver vi en rektangel med rundade hörn och en cirkel för det element vi ska animera, genom att använda SVG kan vi skala ikonen till vilken storlek vi behöver.,

nu har vi skapat vår SVG, vi måste tillämpa några enkla stilar för att styra storleken och positionen för ikonen i vår Behållare. Vi har lindat en länk runt musen SVG och placerat den längst ner på skärmen.

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

därefter skapar vi vår animering. Vid 0 och 20 procent av vägen genom vår animering vill vi ställa in tillståndet för vårt element när det börjar. Genom att ställa in den till 20% av vägen genom, kommer det att förbli stilla under en del av den tid då upprepas oändligt.,

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

Vi måste lägga till i opacitetens startpunkt och sedan omvandla både Y-positionen och den vertikala skalan vid 100% – märket, slutet av vår animering. Det sista vi behöver göra är att släppa opaciteten för att blekna ut vår cirkel.

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

slutligen tillämpar vi animationen på cirkeln, tillsammans med egenskapen ”transformera-ursprung” och egenskapen will-change för att tillåta hårdvaruacceleration. Animeringsegenskaperna är ganska självförklarande., Cubic-bezier timing-funktionen används för att först dra cirkeln tillbaka innan du släpper den till botten av vår musform; detta ger en lekfull känsla till animationen.,

animerat skrivande

Klicka för att se animationen i aktion
  • som ses på: Garden Eight
  • visa koden för sökvägar och text
  • författare: Steven Roberts

Garden Eight-webbplatsen använder en gemensam animationsteknik där text verkar skrivas ut. För att uppnå effekten vänder vi oss till SVG. Till att börja med skapar vi SVG., Det finns två tillvägagångssätt här: konvertera texten till sökvägar för att animera dem eller använda SVG-text. Båda tillvägagångssätten har sina fördelar och nackdelar.

börja med att skapa vår nyckelram animation. Den enda funktion vi behöver för att utföra är att ändra stroke-dashoffset. Nu har vi skapat vår animering, vi måste tillämpa de värden vi vill animera från. Vi ställer in stroke-dasharray, vilket kommer att skapa luckor i stroke. Vi vill ställa in vår stroke för att vara ett tillräckligt stort värde för att täcka hela elementet, slutligen kompensera bindestrecket med längden på stroke.,

magin händer när vi tillämpar vår animering. Genom att animera offset, vi föra stroke i sikte-skapa en ritning effekt. Vi vill att elementen ska rita en åt gången, med viss överlappning mellan slutet av att dra ett element och börja rita nästa. För att uppnå detta vänder vi oss till Sass/SCSS och nth-of-type för att fördröja varje bokstav med halva längden av animationen, multiplicerad med positionen för den specifika bokstaven.,

flygande fåglar

  • som ses på: Fournier père et Fils
  • visa koden för en enda fågel eller hela flocken
  • författare: Steven Roberts

vi börjar med helt raka vektorlinjer, ritar varje ram av vår animering, som visar fågeln i ett annat flygtillstånd. Vi manipulerar sedan vektorpunkterna och runda linjerna och kanterna. Slutligen lägger vi varje ram i en lika stor låda och lägger dem sida vid sida. Exportera filen som en SVG.

HTML-inställningen är väldigt enkel., Vi behöver bara linda varje fågel i en behållare för att tillämpa flera animationer – en för att göra fågeln flyga och den andra för att flytta den över skärmen.

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

Vi tillämpar vår fågel SVG som bakgrund till vår fågel div och väljer den storlek vi vill att varje ram ska vara. Vi använder bredden för att grovt beräkna den nya bakgrundspositionen. SVG har 10 celler, så vi multiplicerar vår bredd med 10 och ändrar sedan numret något tills det ser rätt ut.

CSS animation har ett par knep som du kanske inte är medveten om., Vi kan använda animation-timing-funktionen för att visa bilden i steg-ungefär som att bläddra igenom sidor i en anteckningsbok för att anspela på animering.

nu har vi skapat vår flygcykel, vår fågel flaxar för närvarande sina vingar men går inte någonstans. För att flytta henne över skärmen skapar vi en annan nyckelramanimering. Denna animation kommer att flytta fågeln över skärmen horisontellt samtidigt ändra den vertikala positionen och skalan så att fågeln att meander över mer realistiskt.

När vi har skapat våra animationer behöver vi helt enkelt tillämpa dem., Vi kan skapa flera kopior av vår fågel och tillämpa olika animeringstider och förseningar. 

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

korsa min hamburgare

  • Som sett på: bättre varumärke byrå
  • visa koden för spännvidderna och SVG
  • författare: Steven Roberts

denna animation används över hela webben, vrida tre rader i ett kors eller nära ikon., Fram till ganska nyligen har majoriteten av implementeringarna uppnåtts med hjälp av HTML-element, men faktiskt är SVG mycket mer lämpad för denna typ av animering – det finns inte längre ett behov av att svälla din knappkod med flera spännvidder.

på grund av den animatable naturen och SVG och dess navigerbara DOM ändras koden för att uppnå animationen eller övergången väldigt lite – tekniken är densamma.

vi börjar med att skapa fyra element, vare sig det sträcker sig inuti en div eller vägar inuti en SVG., Om vi använder spännvidder måste vi använda CSS för att placera dem inuti div; om vi använder SVG, är detta redan tagit hand om. Vi vill placera linjerna 2 och 3 i mitten-en ovanpå en annan – medan avståndslinjerna 1 och 4 jämnt över och under, se till att centrera transformationsursprunget.

Vi kommer att förlita oss på att övergå till två egenskaper: opacitet och rotation. Först och främst vill vi tona ut linjerna 1 och 4, som vi kan rikta med hjälp av :Nth-child selector.,

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

det enda som återstår är att rikta in de två mittlinjerna och rotera dem 45 grader i motsatta riktningar.

jagar cirklar

  • Som sett på: bättre varumärke byrå
  • visa koden
  • författare: Steven Roberts

den animerade laddningsikonen består av fyra cirklar. Cirklarna har ingen fyllning, men har alternerande slagfärger.

i vår CSS kan vi ställa in några grundläggande egenskaper till alla våra cirklar och sedan använda :nth-of-type väljaren för att tillämpa en annan stroke-dasharray till varje cirkel.,

därefter måste vi skapa vår nyckelram animation. Vår animation är verkligen enkel: allt vi behöver göra är att rotera cirkeln med 360 grader. Genom att placera vår omvandling på 50% – märket av animationen roterar cirkeln också tillbaka till sin ursprungliga position.

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

med vår animering skapad behöver vi nu bara tillämpa den på våra cirklar. Vi ställer in animationsnamnet; varaktighet; iteration count och timing funktion. ”Ease-in-out” kommer att ge animationen en mer lekfull känsla.,

för tillfället har vi vår lastare, men alla element roterar samtidigt. För att åtgärda detta, kommer vi att tillämpa vissa förseningar. Vi skapar våra förseningar med hjälp av en Sass för loop.

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

på grund av förseningarna animerar vår cirkel i sin tur och skapar illusionen av cirklarna som jagar varandra. Det enda problemet med detta är att när sidan först Laddas är cirklarna statiska, då börjar de flytta, en i taget. Vi kan uppnå samma förskjutningseffekt, men stoppa den oönskade pausen i vår animering genom att helt enkelt ställa in förseningarna till ett negativt värde.,

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

Next page: More CSS animation examples to explore