Brukt godt, CSS animasjon er et utrolig nyttig og kraftig verktøy. Det kan legge til interesse eller kreativ spenning, direkte brukerens øyne, forklare noe raskt og konsist, og forbedre brukervennligheten. Av den grunn, de siste årene har sett mer og mer animasjon på nettsteder og i appen.

I denne artikkelen, vi runder opp noen av de kuleste CSS animasjon eksempler vi har sett, og vise deg hvordan å gjenskape dem., Les videre for en rekke grundig opplæring og inspirerende effekter (og lenker til deres kode) for å utforske.

Hva er CSS-animasjoner?

CSS-animasjon er en metode for å animere enkelte HTML-elementer uten å måtte bruke prosessor og minne-sulten JavaScript eller Flash. Det er ingen grense for antall eller frekvens av CSS-egenskaper som kan endres. CSS-animasjoner er initiert ved å angi hovedrammer for animasjon: disse keyframes inneholder stilene at elementet vil ha.,

Mens det kan synes begrenset når det kommer til animasjon, CSS er faktisk en veldig kraftig verktøy, og er i stand til å produsere vakkert glatt 60fps animasjoner. «Å levere gjennomtenkte, væske animasjoner som bidrar meningsfylt dybde til nettstedet ditt trenger ikke å være vanskelig, sier front end webutvikler Adam Kuhn. «Moderne CSS-egenskaper nå hånd du nesten alle verktøyene du trenger for å skape minneverdige opplevelser for brukerne.,»

Den beste animasjoner fortsatt har sine røtter i Disneys klassiske 12 prinsipper for animasjon, vil du se flere nevner at i disse CSS-animasjon eksempler, så det er verdt å sjekke ut denne artikkelen før du setter i gang. Du kan også være lurt å se på våre roundup av flotte animerte musikkvideoer for flere eksempler og inspirasjon.

Den gylne regelen er at CSS-animasjoner bør ikke være overdrevet – selv en liten bevegelse kan ha en stor innvirkning, og for mye kan være forstyrrende og irriterende for brukerne., Her er vår favoritt eksempler og hvordan å gjenskape dem.

Moro musen effekt

  • Forfatter: Donovan Hutchinson

Dette er en morsom effekt som følger musen rundt. Det kan være nyttig når du ønsker å trekke oppmerksomhet til et element på din side.

Vi trenger svært lite HTML for denne effekten:

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

for det Første, vi plassere demo og angi perspektiv for våre 3D-transform:

Deretter stil div-vi ønsker å animere:

Her har vi satt en bakgrunn, så vi setter videre til skjult slik at vi kan legge til en glans effekt senere., Vi har også sett css variabler, sheenX og sheenY.

Disse sheen variabler vil hjelpe plasser glans effekt. Vi vil bruke dem i våre kort er etter pseudo-element:

Her er noe som gjør at pseudo-element er større enn beholderen. Dette vil gi oss noe å skyve rundt på toppen av kortet ved hjelp av transform.

forvandle eiendommen er å gjøre bruk av de CSS variablene vi har sett tidligere. Vi vil sette disse med JavaScript. La oss sette opp den første JavaScript for å lytte etter mus hendelser:

dokument.,onmousemove = handleMouseMove;

Vi trenger nå en handleMouseMove funksjon for å håndtere onmousemove:

Vår funksjon tar vinduet høyde og bredde, og skaper en vinkel på X-og Y-aksene. Vi deretter sette disse til å forandre stil av våre kort. Dette gir kortet en vinkel basert på musen!

Vi neste kalle en funksjon for å sette pseudo-elementets posisjon:

Vår pseudo-element ser best ut når den beveger seg i motsatt retning av musen. For å oppnå dette vil vi skape et nummer mellom -0.5 og 0,5 at endringer i motsatt retning ved å beregne forholdet med -1.,

Vi multiplisere dette tallet med 800 som vi vil ha det til å skalere opp til et maksimum av 400px, som er hvor langt vi setter sheen pseudo-element utenfor kortet.

til Slutt setter vi disse offset verdier for våre CSS variable egenskaper, og nettleseren er gjengivelsen gjør resten.

Vi nå har et kort som snur seg for å se våre musen mens glans effekt beveger seg i motsatt retning på toppen. Dette skaper en flott, iøynefallende effekt.,

Den store avsløre

  • Forfatter: Adam Kuhn

Animert innhold avsløre effekter synes å være ganske populært akkurat nå, og brukt riktig kan de fange brukeren i fokus og engasjere publikum. Du har sett dette før: en blokk av farge vokser fra den ene eller andre horisontalt eller vertikalt, og deretter trekker seg tilbake til den motsatte side, denne gang å avsløre noen tekst eller et bilde under. Det er et konsept som kan virke vanskelige, men egentlig er avhengig av bare et par ting.,

Først vil vi sette opp våre element lokalisering (last ned hele kode her) – definere det som relativ (kun statiske vil mislykkes i dette tilfellet). I teksten tilfeller er det best å tillate automatisk høyde og bredde, men litt polstring gjør ikke vondt. Vi vil også definere en forvandle opprinnelse, i tilfelle av den overordnede elementet vi ønsker å bruke startposisjonen. Siden vi vil at elementet er skjult i utgangspunktet, vil vi bruke en skala forvandle langs den aktuelle aksen til å krympe det.

Neste, en en pseudo-element for å maskere våre foreldre, sette forvandle opphav til motstridende alternativ., Til slutt, string sammen animasjoner, enten ved hjelp av timing funksjoner eller forsinkelser for å forskyve hvert.

Merk, vi har motvirket den overordnede og pseudo-element er animasjoner med en forsinkelse forteller boksen som skjuler vår tekst for å avsløre det bare når elementet i seg selv har fullt skalert til syne. Sjekk ut Codepen nedenfor.

Vakler på

  • Forfatter: Adam Kuhn

Når du har begynt å bygge opp en anstendig bibliotek av ulike lettelser utdrag, er det på tide å se på andre måter å øke dybden av animasjoner, og en av de beste måtene er å rette opp den animerte elementer.,

Det er altfor vanlig at JavaScript trigger er satt til å starte en haug av animasjoner basert på bla posisjon, bare for å finne alle elementene beveger seg effektivt i tandem. Heldigvis CSS i seg selv gir en enkel egenskap som kan gjøre (eller pause) din animerte erfaring: animasjon-forsinkelse.

La oss si, for eksempel, har vi et rutenett med bilder vi ønsker å animere inn i bildet når brukeren ruller. Det er flere måter vi kan utløse dette, mest sannsynlig legge til klasser til elementer som de kommer inn i vinduet., Dette kan være ganske tunge løft på nettleseren, imidlertid, og kan unngås ved å bare legge til én klasse til en container element og definerer animasjon forsinkelser på barn elementer.

Dette er en spesielt god bruk tilfelle for preprocessors som SCSS eller MINDRE, som tillater oss å bruke en @for-løkke til å gå gjennom hvert 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; }} }}

Her vil du se med SCSS er vi i stand til å gå gjennom hver :nth-of-type-velgeren, deretter bruke en animasjon forsinkelse basert på hvert barn elementets numeriske verdi., I dette tilfellet vil du merke vi dele opp våre timing for å redusere hvert inkrement til en brøkdel av et sekund. Mens utligne din animerte elementer kan låne følelser til din animasjon, for mye forsinkelse kan gjøre det føles som usammenhengende. Sjekk ut denne CodePen nedenfor.

Squigglevision

  • Forfatter: Adam Kuhn

SVG-filtre gir en flott måte å oppnå et naturlig, håndtegnet føler og unnslippe noen av rommene har flatskjerm-følelse gjengivelse begrensninger av CSS alene. Animere dem kan ytterligere forsterke effekten.

Sak: Squigglevision., Ja, dette er ikke et teknisk begrep som er kjent for de fleste animatører, men du har sikkert sett det som er ansatt i tegneserier. Ideen er at kantene av disse animerte elementer er ikke bare noe hakkete og ujevn-hugget, men disse grove kantene raskt variere, ramme for ramme, noe som gjør dem føler seg som om de har blitt dratt fra sidene av en skissebok og brakt til liv.

for Å oppnå denne effekten, vi kan ta en SVG-på vår side med flere filtre og små variasjoner i turbulens nivåer for hver. Neste, vil vi sette opp våre animasjon tidslinjen, ringer hvert filter i sin egen keyframe., Det er viktig å spille med timing varigheter som vi forventer animasjonen vil føle ‘hun’, men ikke vil ha det så sakte som å føle usammenhengende eller så fort som å føle meg gal.

Til slutt, det er viktig å merke seg at CSS mangler evnen til sømløs overgang mellom SVG-filtre som det er ingen måte å få tilgang til egenskaper som turbulens og omfang, slik at disse typer animasjoner bør alltid være forventes å bli hakkete.,

Tumbling skrift

  • sett på: Spillet av Året
  • Forfatter: Leon brown

Googles Spillet av Året har en leken CSS animasjon på startsiden, med tittelen ord tumbling og komme borti hverandre. Her er hvordan det ble gjort.

Det første trinnet er å definere nettside dokument med HTML. Det består av HTML-dokument container, som lagrer en head og body-delen., Mens head-delen brukes til å laste eksterne CSS og JavaScript ressurser, kroppen brukes til å lagre innhold på siden.

siden innholdet består av tre h1 tittel koder som viser forskjellige varianter av animasjon effekt. Mens noen tekst kan være satt inn disse kodene, deres animasjon er definert av navn i class-attributt. Presentasjonen og animasjon innstillinger for disse klasse navn vil bli definert i CSS senere.

Neste, opprettes det en ny fil kalt » code.js’., Vi ønsker å finne alle sideelementer med animere klasse og opprette en matrise liste som representerer hvert ord av den indre tekst. Den første animasjonen forsinkelse er også definert i dette trinnet. Siden innholdet er ikke tilgjengelig før siden er ferdig lastet, så denne koden blir plassert på innsiden av vinduet last hendelse tilhører.

ordet innhold av animasjon elementer må være inneholdt i en span element. For å gjøre dette, HTML-innhold er tilbakestilt til tom, så en sløyfe brukes til å gjøre ordet i de identifiserte ‘ord’ en liste span element., I tillegg, en animationDelay stilen som er brukt – beregnet i forhold til den første forsinkelse (spesifisert nedenfor) og ordet ‘ s indeks posisjon.

du vil Opprette en ny fil som heter stiler.css. Nå skal vi sette presentasjon regler som vil bli en del av hvert ord element i animasjonen, som styres av sine span koden. Display som blokk, kombinert med sentrert tekst justering, vil resultere i hvert ord vises på en egen linje horisontalt rettet inn mot midten av emballasjen. Relativ posisjonering vil bli brukt til å animere i forhold til sin tekst-flow » – posisjon.,

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

Animasjon elementer som har den bakover og forover klasse har en bestemt animasjon gjaldt dem. Dette trinnet definerer animasjon til å gjelde span elementene som forelder container har både det levende og bakover eller fremover klasse.

Merk for å se hvordan det er ingen plass mellom det levende og bakover klasse referanse, betyr det overordnede element må ha begge.

blandet animasjon er definert ved hjelp av de samme innstillingene som brukes for forover og bakover animasjoner., I stedet for å legge til animasjoner til alle barn av forelder, nth-child selector er brukt til å bruke vekslende animasjon innstillinger. Baklengs animasjon brukes til alle selv-antall barn, mens fremover animasjon er brukt på hver odd-antall barn.

animasjonene vi har nettopp opprettet er laget med en innledende ‘fra’ startposisjon, med ingen vertikal posisjon eller rotasjon justering. Det ‘å’ posisjon er den siste tilstand av animasjon som angir elementer med en justert vertikal posisjon og rotasjon staten., Litt forskjellige forhold innstillinger er brukt for både animasjoner for å unngå at teksten blir uleselig på grunn av overlapp i blandet animasjoner.

Flip book

  • Forfatter: Adam Kuhn

Når du blir med CSS-noen ganger kan en død enkel tilnærming er nødvendig. Og det er få enklere animasjon metoder enn den flip bok. Ved hjelp av trinnene () som vår timing funksjon, vi er i stand til å gjenskape denne effekten. Mens dette kan høres hakkete og direkte motsier vår oppgave å opprettholde flyt, med riktig tempo kan det føles akkurat som sømløst økologisk.

Så hvordan fungerer det?, Vi definerer vår animasjon lettelser funksjon med bare et par andre parametere – å fortelle vår animasjon hvor mange tiltak er nødvendig og på hvilket tidspunkt i løpet av det første skrittet vi ønsker å begynne (start, slutt) som ser litt ut som dette, for eksempel trinn (10, start).

Innenfor våre keyframes, kan vi nå definere et punkt til vår animasjon: for dette eksemplet la oss anta at vår animasjon er 10 sekunder lang, og vi bruker 10 trinn. I dette tilfellet er hvert trinn vil være ett sekund for lenge, umiddelbart gå til følgende på ett sekund ramme med ingen overgang mellom.,

Igjen, dette ser ut til å fly i ansiktet av flyt, men her er der gikk animasjoner kan virkelig skinne. Vi kan trinnvis gå gjennom en sprite ark og animere frame-by-frame, akkurat som en flip bok. Ved å definere rammene av lik størrelse, men å lage dem på en enkel horisontal (eller vertikalt) bilde, kan vi sette dette bildet som et element bakgrunn og definere en piksel eller prosentandel bakgrunn posisjon som et punkt til vår animasjon, slik at ett trinn for hvert bilde., Den sprite ark vil da shift og fylle element frame by frame med en frisk bakgrunnen av bildet basert på sin posisjon.

La oss ta en titt på et eksempel. I dette tilfellet noen sett av animerte bena lagt til litt tekst og tegn. Først vil vi definere vår animasjon navn, varighet, skritt-teller, start-posisjon og iterasjon count: 

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

Igjen, vær oppmerksom på at varigheten er relativt rask på mindre enn en hel andre for 32 totale rammer., Neste, vil vi definere våre keyframes: 

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

Merk at den vertikale posisjonen til bildet er konsekvent gjennom, noe som forteller oss at sprites er horisontalt strukket over bildet, som er 1280px i total bredde. Som vi har definert 32 totale rammer for bildet, kan vi utlede at hvert bilde skal være 40px bredt. Sjekk ut denne Codepen nedenfor.

Det er viktig å merke seg at en stor sprite ark kan potensielt være en alvorlig dra på ytelse, så du må være sikker på at størrelse og komprimere bilder., Med en godt utformet sprite ark og en passende animasjon varigheten du har nå en jevn animasjon i stand til å formidle komplekse bevegelser.

Blåser bobler

  • Som har sett på: 7UP
  • Vis koden
  • Forfatter: Steven Roberts

CSS-boble animasjon som funksjoner på 7UP er et vakkert eksempel for å bære et merke som tema gjennom til nettstedet ditt design. Animasjonen består av mange elementer: SVG «tegning» av bobler, og deretter to animasjoner som brukes for hvert boble.,

Den første animasjonen endringer i tettheten av boblen og beveger seg vertikalt i vis-boksen, og den andre skaper vingling effekt for ekstra realisme. Kvotene er håndtert ved å målrette hver boble og å bruke en annen animasjon varighet og forsinkelse.

for å lage vår bobler som vi bruker for SVG. I vår SVG-vi lage to lag av bobler: en for de større bobler og en for de mindre bobler. Inne i SVG-vi plasserer alle våre bobler på bunnen av boksen visning.,

for å bruke to separate animasjoner til vår SVGs, både ved å utnytte den forvandle eiendommen, trenger vi å bruke animasjoner til separate elementer. <g> – element i SVG kan brukes mye som en div-elementet i HTML; vi trenger å bryte hver av våre bobler (som allerede er i en gruppe) i en gruppe tag.

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

CSS har en kraftig animasjon motor og veldig enkel kode for å produsere komplekse animasjoner., Vi vil starte med å flytte bobler opp skjermen og endre sine dekkevne for å fade dem inn og ut ved begynnelsen og slutten av animasjonen.

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

for å lage en vingling effekt, vi trenger bare å flytte (eller oversett) boblen venstre og høyre, med akkurat den rette mengden – for mye vil føre til animasjonen for å se for jaunting og frakoblet, mens for lite vil gå stort sett ubemerket hen. Eksperimentering er viktig med når du arbeider med animasjon.,

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

for å bruke animasjon til vår bobler, vil vi bruke de gruppene vi brukte tidligere, og hjelp av nth-of-type for å identifisere hver boble gruppe individuelt. Vi begynner ved hjelp av en opacity verdi til det bobler og det vil-endre eiendom for å bruke maskinvare-akselerasjon.

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

Vi ønsker å beholde alle animasjon ganger, og forsinkelser i løpet av et par sekunder fra hverandre og sette dem til å gjenta uendelig. Til slutt, vi bruker letthet-i-ut timing funksjonen til vår vingle animasjon for å få det til å se litt mer naturlig.,

Bla musen

  • Som har sett på: Baltic Trening
  • Vis koden
  • Forfatter: Steven Roberts

En subtil rulle musen animasjon kan gi retning til brukeren når de første land på en nettside. Selv om dette kan oppnås ved hjelp av HTML-elementer og egenskaper, vi kommer til å bruke SVG som dette er mer egnet til å tegne.

Inne i våre SVG-vi trenger et rektangel med avrundede hjørner og en sirkel for elementet vi kommer til å animere, ved hjelp av SVG-vi kan skalere ikonet til alle størrelser vi trenger.,

Nå har vi laget vår SVG, trenger vi å bruke noen enkle stiler for å kontrollere størrelsen og plasseringen av symbolet i vår container. Vi har pakket en lenke rundt musen SVG og plassert den til bunnen av skjermen.

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

Neste vi skal lage vår animasjon. Ved 0 og 20 prosent av måten gjennom vår animasjon, ønsker vi å sette staten våre element som det begynner. Ved å sette den til 20% av veien gjennom, vil det bli fortsatt for en del av tiden når det gjentas uendelig.,

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

Vi trenger å legge i dekkevne start point og deretter forvandle både Y-posisjon, og den vertikale skalaen i 100% markere slutten på vår animasjon. Det siste vi trenger å gjøre er å slippe opacity for å fade ut vår sirkel.

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

til Slutt vi bruke animasjon til en sirkel, sammen med ‘transform-opprinnelse’ eiendom, og vil-endre egenskapen til å tillate maskinvare akselerasjon. Animasjonen egenskaper er ganske selvforklarende., Den kubikk-bezier-timing-funksjonen brukes til å først trekke sirkelen tilbake før slippe den til bunnen av våre musen form, og dette legger et lekent preg animasjon.,

Animerte skriftlig

Klikk for å se animasjonen i handling
  • Som har sett på: Garden Åtte
  • Vis koden for stier og tekst
  • Forfatter: Steven Roberts

The Garden Åtte nettstedet bruker et felles animasjon teknikk der teksten vises på å bli skrevet ut. For å oppnå effekt, slår vi til SVG. Til å begynne med, vi vil lage SVG., Det er to tilnærminger her: konverter tekst til banene for å animere dem eller bruke SVG tekst. Begge metodene har sine fordeler og ulemper.

Begynn med å lage vår keyframe animasjon. Den eneste funksjonen vi trenger det for å utføre, er å endre slag-dashoffset. Nå har vi laget vår animasjon, trenger vi å bruke de verdiene vi ønsker å animere fra. Vi setter strek-dasharray, noe som vil skape hull i slag. Vi ønsker å sette vårt slag til å være en stor nok verdi til å dekke hele element, til slutt utligner dash av lengden på streken.,

Det magiske som skjer når vi bruker vår animasjon. Ved å animere offset, vi bringer det slag i vis – lage en tegning effekt. Vi ønsker elementene til å tegne på en gang, med noen overlapping mellom slutten av tegning ett element og begynner å tegne den neste. For å oppnå dette, må vi slå til Sass/SCSS og nth-of-type til forsinkelse hver bokstav med halve lengden av animasjon, multiplisert med den posisjon at den aktuelle bokstaven.,

Flygende fugler

  • Som har sett på: Fournier Père et Fils
  • Vise-koden for en enkelt fugl eller hel flokk
  • Forfatter: Steven Roberts

Vi starte med helt rett vektor linjer, tegning hver ramme av våre animasjon, skildrer fuglen i en annen tilstand av flyturen. Vi deretter manipulere vektor poeng og runde linjer og kanter. Til slutt satte vi hver ramme inn en like stor boks og legg dem side ved side. Du eksportere filen som SVG.

HTML-oppsettet er veldig enkelt., Vi trenger bare å pakke hver fugl i en container for å bruke flere animasjoner – en til å gjøre fuglen fly og andre til å flytte den over skjermen.

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

Vi anvender våre fugl SVG som er bakgrunnen for vår fugl div og velge den størrelsen vi vil at hver ramme for å være. Vi bruker bredde ca beregne den nye bakgrunnen posisjon. SVG har 10 celler, slik at vi multiplisere vår bredde av 10 og deretter endre antallet litt til det ser riktig.

CSS-animasjon har et par triks du kan ikke være klar over., Vi kan bruke animasjon-timing-funksjonen til å vise bildet i skritt, nesten som å bla gjennom sidene i en bærbar pc for å henvise til animasjon.

Nå har vi laget våre fly syklus, våre fugl er for tiden flakset med vingene, men er ikke å gå hvor som helst. For å flytte henne over skjermen, og vi opprette en ny keyframe animasjon. Denne animasjonen vil flytte fugl over skjermen vannrett mens du også endre den vertikale posisjonen, og omfanget for å la fuglen til å meandrerer over mer realistisk.

Når vi har laget våre animasjoner, vi trenger bare å bruke dem., Vi kan lage flere kopier av våre fugl og anvende ulike animasjon ganger og forsinkelser. 

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

Krysser mine hamburger

  • Som har sett på: Bedre Merkevare Byrå
  • Vis koden for spenn og SVG
  • Forfatter: Steven Roberts

Denne animasjonen brukes over alt på internett, slå tre linjer til et kryss eller lukk-ikonet., Inntil ganske nylig, har de fleste implementeringer har blitt oppnådd ved hjelp av HTML-elementer, men faktisk SVG er mye mer egnet til denne type animasjon – det er ikke lenger behov for å bloat knappene koden med flere spenner.

på Grunn av den animatable natur og SVG og dens farbare DOM, kode for å oppnå animasjon eller overgang endringer veldig lite – teknikken er den samme.

Vi begynner med å opprette fire elementer, være den spenner over innsiden av en div eller stier inne i en SVG., Hvis vi bruker spenn, vi trenger å bruke CSS til å plassere dem i div; hvis vi bruker SVG, dette er allerede tatt vare på. Vi ønsker å plassere linjene 2 og 3 i sentrum – en på toppen av en annen–, mens avstanden mellom linje 1 og 4 jevnt over og under, slik at til sentrum transform opprinnelse.

Vi er nødt til å stole på overgangen to egenskaper: dekkevne og rotasjon. Først av alt, ønsker vi å fade ut linjer 1 og 4, som vi kan målrette bruke :nth-child-velgeren.,

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

Det eneste igjen å gjøre er å målrette de to midterste linjene og rotere dem 45 grader i motsatt retning.

Jage sirkler

  • Som har sett på: Bedre Merkevare Byrå
  • Vis koden
  • Forfatter: Steven Roberts

Den animerte legge ikonet består av fire sirkler. Sirklene har uten fyll, men har vekslende slag-farger.

I vår CSS, vi kan stille noen grunnleggende egenskaper til alle våre sirkler og deretter bruke den :nth-of-type velger å bruke et annet slag-dasharray til hver sirkel.,

Neste, må vi lage vår keyframe animasjon. Vår animasjon er veldig enkel: alt vi trenger å gjøre er å rotere sirkel av 360 grader. Ved å plassere våre transformasjon på 50% preg av animasjon, sirkelen vil også rotere tilbake til sin opprinnelige posisjon.

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

Med vår animasjon opprettet, har vi nå bare trenger å bruke den til våre sirkler. Vi setter animasjon navn, varighet; iterasjon telle og timing funksjon. Den «lette-i-out» vil gi animasjonen et mer lekent preg.,

I øyeblikket, vi har våre loader, men alle elementene er roterende sammen på samme tid. For å fikse dette, vil vi bruke noen forsinkelser. Vi skal lage vår forsinkelser ved hjelp av en Sass for-løkke.

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

på Grunn av forsinkelser, vår sirkel nå animerer i sin tur skape illusjonen av sirklene jage hverandre. Det eneste problemet med dette er at når siden lastes inn, sirkler er statisk, så de begynner å bevege seg, en av gangen. Vi kan oppnå samme offset effekt, men stoppe uønsket pause i vår animasjon ved ganske enkelt å sette den forsinkelser til en negativ verdi.,

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

Next page: More CSS animation examples to explore