brugt godt, CSS animation er et utroligt nyttigt og kraftfuldt værktøj. Det kan tilføje interesse eller kreativ spænding, rette brugerens øje, forklare noget hurtigt og kortfattet og forbedre brugervenligheden. Af den grund har de senere år set mere og mere animation på sitesebsteder og i app.

i denne artikel afrunder vi nogle af de fedeste CSS-animationseksempler, vi har set, og viser dig, hvordan du genskaber dem., Læs videre for en række dybdegående tutorials og inspirerende effekter (og links til deres kode) for at udforske.

Hvad er CSS animation?

CSS animation er en metode til at animere visse HTML-elementer uden at skulle bruge processor og hukommelse-sulten JavaScript eller Flash. Der er ingen grænse for antallet eller hyppigheden af CSS egenskaber, der kan ændres. CSS-animationer initieres ved at specificere keyframes til animationen: disse keyframes indeholder de stilarter, som elementet vil have.,selvom det kan virke begrænset, når det kommer til animation, er CSS faktisk et virkelig kraftfuldt værktøj og er i stand til at producere smukt glatte 60fps animationer. “At levere tankevækkende, flydende animationer, der bidrager med meningsfuld dybde til dit .ebsted, behøver ikke at være svært,” siger frontend developerebudvikler Adam Kuhn. “Moderne CSS-egenskaber giver dig nu næsten alle de værktøjer, du har brug for for at skabe mindeværdige oplevelser for dine brugere.,”

de bedste animationer har stadig deres rødder i Disneys klassiske 12 principper for animation – du vil se flere omtaler af det gennem disse CSS-animationseksempler, så det er værd at tjekke den artikel, før du kommer i gang. Du kan også ønsker at udforske vores roundup af store animerede musikvideoer for yderligere eksempler og inspiration.

den gyldne regel er, at dine CSS – Animationer ikke bør være overdrevne-selv en lille bevægelse kan have stor indflydelse, og for meget kan være distraherende og irriterende for brugerne., Her er vores yndlingseksempler, og hvordan du genskaber dem.

Sjov mus effekt

  • Forfatter: Donovan Hutchinson

Dette er en sjov effekt, der følger musen rundt. Det kan være nyttigt, når du vil henlede opmærksomheden på et element på din side.

Vi har brug for meget lidt HTML for denne effekt:

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

Først skal vi placere demo og sæt perspektiv for vores 3D-transform:

Så stil den div, vi ønsker at animere:

Her har vi sat en baggrund, så har vi sat overløb til skjult, så vi kan tilføje en glans effekt senere., Vi har også sat CSS variabler, Sheen and og sheenY.

disse glansvariabler hjælper med at placere glanseffekten. Vi bruger dem i vores kort efter pseudo-element:

Her sørger vi for, at pseudo-elementet er større end beholderen. Dette vil give os noget at glide rundt på toppen af kortet ved hjælp af transform.transform-egenskaben gør brug af de CSS-variabler, vi har angivet tidligere. Vi sætter dem med JavaScript. Lad os konfigurere JavaScript til først at lytte til musebegivenheder:

dokument.,onmousemove = handleMouseMove;

Vi har nu brug for en handleMouseMove funktion til at håndtere onmousemove:

Vores funktion tager vindue, højde og bredde og skaber en vinkel på X-og Y-akserne. Vi sætter derefter disse til transformationsstilen på vores kort. Dette giver kortet en vinkel baseret på musen!

vi kalder derefter en funktion for at indstille pseudoelementets position:

vores pseudoelement ser bedst ud, når det bevæger sig i modsat retning af musen. For at opnå dette skaber vi et tal mellem -0.5 og 0.5, der ændrer sig i den modsatte retning ved at beregne forholdet med -1.,

vi multiplicerer dette tal med 800, da vi ønsker, at det skaleres op til maksimalt 400p., hvilket er hvor langt vi sætter sheen pseudo-elementet uden for kortet.

endelig sætter vi disse offsetværdier til vores CSS-variable egenskaber, og bro .serens renderer gør resten.

Vi har nu et kort, der vender mod vores mus, mens glanseffekten bevæger sig i den modsatte retning på toppen. Dette skaber en dejlig, iøjnefaldende effekt.,

the big reveal

  • forfatter: Adam Kuhn

animeret indhold reveal effekter synes at være ganske populære lige nu, og bruges korrekt de kan fange brugerens fokus og engagere dit publikum. Du har set dette før: en Farveblok vokser fra den ene eller den anden side vandret eller lodret og trækker sig derefter tilbage til den modsatte side, denne gang afslører noget tekst eller et billede nedenunder. Det er et koncept, der kan virke vanskeligt, men virkelig er afhængig af bare et par ting.,

først opretter vi vores elementpositionering (do .nload den fulde kode her) – Definer den som relativ (kun statisk vil mislykkes i dette tilfælde). I tekstsager er det bedst at tillade automatisk højde og bredde, selvom en smule polstring ikke skader. Vi definerer også en transformation oprindelse, i tilfælde af det overordnede element, vi ønsker at bruge startpositionen. Da vi ønsker elementet skjult oprindeligt, bruger vi en skalatransformation langs den passende akse for at krympe det.

dernæst A et pseudoelement til at maskere vores forælder ved at indstille transform origin til den modsatte mulighed., Endelig, streng sammen animationerne, ved hjælp af enten timing funktioner eller forsinkelser til at udligne hver.

Bemærk, Vi har udlignet forældrenes og pseudoelementets animationer med en forsinkelse, der fortæller boksen, der skjuler vores tekst for at afsløre den først, når selve elementet er fuldt ud skaleret til syne. Tjek Kodepen nedenfor.

Stagger på

  • forfatter: Adam Kuhn

Når du er begyndt at samle et anstændigt bibliotek med forskellige lempelsesuddrag, er det tid til at undersøge andre måder at forbedre dybden på dine animationer, og en af de bedste måder er at udligne dine animerede elementer.,

det er alt for almindeligt, at en JavaScript-trigger er indstillet til at starte en masse animationer baseret på rulleposition, kun for at finde alle elementer, der bevæger sig effektivt i tandem. Heldigvis CSS selv giver en simpel egenskab, der kan gøre (eller pause) din animerede oplevelse: animation-forsinkelse.lad os sige, at vi for eksempel har et gitter af billeder, vi vil animere til ramme, når brugeren ruller. Der er en række måder, vi kan udløse dette på, sandsynligvis tilføje klasser til elementerne, når de kommer ind i visningsporten., Dette kan være en ganske tunge løft på browseren, dog, og kan undgås ved blot at tilføje et enkelt klasse til en container element og definere animation forsinkelser på underordnede elementer.

Dette er en særlig god brugssag til præprocessorer som SCSS eller mindre, som giver os mulighed for at bruge en @for loop til at gentage gennem 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 ser du med SCSS, at vi er i stand til at gennemløbe hver :nth-of-type selector og derefter anvende en animationsforsinkelse baseret på hvert barns numeriske værdi., I dette tilfælde vil du bemærke, at vi deler vores timing for at reducere hver stigning til en brøkdel af et sekund. Mens modregning dine animerede elementer kan låne følelser til din animation, for meget forsinkelse kan gøre det føles usammenhængende. Tjek denne CodePen nedenfor.

Squigglevision

  • Forfatter: Adam Kuhn

SVG-filtre giver en fantastisk måde at opnå en naturlig, håndtegnede føler og slippe nogle af fladskærms-følelse rendering begrænsninger af CSS alene. Animere dem kan yderligere forbedre effekten.

sag i punkt: s .uigglevision., Ja, Dette er ikke et teknisk udtryk kendt for de fleste animatorer, men du har sikkert set det ansat i tegnefilm. Ideen er, at kanterne af disse animerede elementer er ikke kun noget forrevne og groft hugget, men de ru kanter hurtigt variate, frame for frame, at gøre dem til at føle som om de er blevet revet ud af siderne i en skitsebog og bragt til live.

for at opnå denne effekt kan vi inkludere en SVG på vores side med flere filtre og små variationer i turbulensniveauer for hver. Dernæst opretter vi vores animationstidslinje og kalder hvert filter i sin egen keyframe., Det er vigtigt at spille med timingvarigheden, da vi forventer, at animationen vil føle sig ‘hoppende’, men vil ikke have det så langsomt at føle sig usammenhængende eller så hurtigt at føle sig skør.

det er vigtigt at bemærke, at CSS mangler mulighed for en smidig overgang mellem SVG-filtre, som der er ingen måde at få adgang til egenskaber såsom turbulens og omfang, så disse typer af animationer bør altid forventes at være urolig.,

Tumbling bogstaver

  • Som det ses på: Game of the Year
  • Forfatter: Leon brun

Google ‘ s Spil af Året byder på en legende CSS animation på hjemmesiden, med titlen ord tumbling og ramlede ind i hinanden. Sådan blev det gjort. det første trin er at definere documentebsidedokumentet med HTML. Den består af HTML-dokumentbeholderen, der gemmer et hoved-og kropsafsnit., Mens hovedafsnittet bruges til at indlæse de eksterne CSS-og JavaScript-ressourcer, bruges kroppen til at gemme sidens indhold.

sideindholdet består af tre H1-titelmærker, der viser de forskellige variationer af animationseffekten. Mens enhver tekst kan indsættes i disse tags, defineres deres animation af navnene i klasseattributten. Præsentations – og animationsindstillingerne for disse klassenavne vil blive defineret i CSS senere.

Opret derefter en ny fil kaldet ‘kode.js’., Vi ønsker at finde alle sideelementer med animate-klassen og oprette en array-liste, der repræsenterer hvert ord i den indre tekst. Den indledende animationsforsinkelse er også defineret i dette trin. Sideindhold er ikke tilgængeligt, før siden er fuldt indlæst, så denne kode placeres inde i vinduets indlæsningshændelseslytter.

ordindholdet i animationselementerne skal være indeholdt i et spændingselement. For at gøre dette nulstilles det eksisterende HTML-indhold til tomt, derefter bruges en løkke til at gøre ordet i den identificerede ‘ord’ – liste til et spændingselement., Derudover anvendes en animationDelay-stil-beregnet i forhold til den indledende forsinkelse (angivet nedenfor) og ordets indeksposition.

Opret en ny fil kaldet styles.css. Nu sætter vi præsentationsreglerne, der vil være en del af hvert ordelement i animationen, kontrolleret af deres span-tag. Vis som blok, kombineret med centreret tekstjustering, vil resultere i, at hvert ord vises på en separat linje vandret justeret til midten af dens beholder. Relativ positionering vil blive brugt til at animere i forhold til dens tekst-Flo.position.,

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

animationselementer, der har klassen baglæns og fremad, har en specifik animation anvendt på dem. Dette trin definerer animationen, der skal gælde for spændingselementer, hvis forældrebeholder har både animate og back .ards eller for .ards-klassen.

bemærk, hvordan der ikke er mellemrum mellem animate og back .ard class reference, hvilket betyder, at forældreelementet skal have begge dele.

den blandede animation defineres ved hjælp af de samme indstillinger, der bruges til frem og tilbage animationer., I stedet for at anvende animationerne på alle forældrenes børn, bruges nth-child selector til at anvende skiftende Animationsindstillinger. Den baglæns animation anvendes til alle lige-nummer barn, mens fremad animation anvendes til hver ulige-nummer barn.

de animationer, vi lige har oprettet, er lavet med en indledende ‘fra’ startposition uden lodret position eller rotationsjustering. ‘Til’ – positionen er den endelige tilstand af animationen, som sætter elementerne med en justeret lodret position og rotationstilstand., Lidt forskellige slutningsindstillinger bruges til begge animationer for at undgå, at teksten bliver ulæselig på grund af overlapning i blandede animationer.

Flip book

  • forfatter: Adam Kuhn

når animere med CSS undertiden en død enkel tilgang er nødvendig. Og der er få enklere animationsmetoder end flip-bogen. Ved hjælp af trin () som vores timingfunktion er vi i stand til at gentage denne effekt. Selvom dette måske lyder hakket og direkte modsiger vores mission om at opretholde fluiditet, kan det med den rigtige tempo føles lige så problemfrit organisk.

så hvordan virker det?, Vi definerer vores animationsfremmende funktion med blot et par ekstra parametre – fortæller vores animation, hvor mange trin der er behov for, og på hvilket tidspunkt i det første trin vi gerne vil begynde (start, slut) – ser lidt sådan ud, for eksempel Trin (10, start).

inden for vores keyframes kan vi nu udpege et slutpunkt til vores animation: for dette eksempel lad os antage, at vores animation er 10 sekunder lang, og vi bruger 10 trin. I dette tilfælde vil hvert trin være et sekund langt og straks flytte til den følgende sekunders ramme uden overgang mellem.,

igen synes dette at flyve i lyset af fluiditet, men her er hvor trådte animationer virkelig kan skinne. Vi kan trinvist gentage gennem et sprite ark og animere ramme for ramme ligesom en flip bog. Ved at definere rammer af samme størrelse, men at sammenstille dem på en enkelt vandrette (eller lodrette) billede, kan vi sætte dette billede som et element baggrund og definere en pixel eller en procentsats baggrund position som et slutpunkt til vores animation, der giver et enkelt trin for hver frame., Sprite-arket skifter derefter og befolker elementet ramme for ramme med et nyt baggrundsbillede baseret på dets position.

lad os tage et kig på et eksempel. I dette tilfælde nogle sæt animerede ben vedlagt nogle tekst tegn. Først definerer vi vores animationsnavn, varighed, trinantal, startposition og iterationstælling: 

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

igen skal du bemærke, at varigheden er relativt hurtig på mindre end et helt sekund for 32 samlede rammer., Dernæst vil vi definere vores keyframes: 

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

Bemærk, at den lodrette placering af billedet er konsistent hele, som fortæller os, at sprites er vandret strakte sig over hele billedet, hvilket er 1280px i samlet bredde. Som vi har defineret 32 samlede rammer for det billede, kan vi udlede, at hver ramme skal være 40P.bred. Tjek denne Codepen nedenfor.

det er vigtigt at bemærke, at et stort sprite-ark potentielt kan være et alvorligt træk på ydeevnen, så sørg for at størrelse og komprimere billeder., Med et godt udformet sprite ark og en passende animationsvarighed har du nu en glat animation, der er i stand til at formidle komplekse bevægelser.

Blæser bobler

  • Som det ses på: 7UP
  • Se koden
  • Forfatter: Steven Roberts

CSS-boble, animation, der byder på 7UP er et smukt eksempel for at gennemføre et helt tema igennem i website design. Animationen består af et par elementer: SVG ‘tegning’ af boblerne og derefter to animationer anvendt på hver boble.,

den første animation ændrer opaciteten af boblen og bevæger den lodret i visningsboksen; den anden skaber slingrende effekt for ekstra realisme. Forskydningerne håndteres ved at målrette hver boble og anvende en anden animation varighed og forsinkelse.

for at skabe vores bobler bruger vi SVG. I vores SVG skaber vi to lag af bobler: en for de større bobler og en for de mindre bobler. Inde i SVG placerer vi alle vores bobler i bunden af visningsboksen.,

for at anvende to separate animationer på vores SVGs, begge ved hjælp af transform-egenskaben, er vi nødt til at anvende animationerne på separate elementer. <g> – element i SVG kan anvendes ligesom en div i HTML; vi er nødt til at pakke hver enkelt af vores 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 kraftfuld animationsmotor og virkelig enkel kode for at producere komplekse animationer., Vi starter med at flytte boblerne op på skærmen og ændre deres opacitet for at falme dem ind og ud i begyndelsen og slutningen af animationen.

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

for at oprette en slingrende effekt, er vi simpelthen nødt til at flytte (eller oversætte) boblen til venstre og til højre, med den helt rigtige mængde – alt for meget vil medføre animation til at se alt for at tage og frakobles, mens der for lidt vil gå det meste ubemærket hen. Eksperimentering er nøglen til, når du arbejder med animation.,

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

for at anvende animationen på vores bobler bruger vi de grupper, vi brugte tidligere, og hjælp fra nth-of-type til at identificere hver boble gruppe individuelt. Vi starter med at anvende en opacity værdi til boblerne og willill-change egenskaben for at udnytte hard .areacceleration.

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

Vi vil beholde alle animationstider og forsinkelser inden for et par sekunder af hinanden og indstille dem til at gentage uendeligt. Endelig anvender vi ease-in-out timing-funktionen til vores wobble animation for at få det til at se lidt mere naturligt ud.,

Rulning med musen

  • Som det ses på: Baltic Uddannelse
  • Se koden
  • Forfatter: Steven Roberts

En subtil rulle musen animation kan give retning til brugeren, når de først lander på en hjemmeside. Selvom dette kan opnås ved hjælp af HTML-elementer og egenskaber, vil vi bruge SVG, da dette er mere egnet til tegning.inde i vores SVG har vi brug for et rektangel med afrundede hjørner og en cirkel for det element, vi skal animere, ved at bruge SVG kan vi skalere ikonet til enhver størrelse, vi har brug for.,

nu har vi oprettet vores SVG, vi skal anvende nogle enkle stilarter for at kontrollere størrelsen og placeringen af ikonet i vores container. Vi har pakket et link rundt om musen SVG og placeret det til bunden af skærmen.

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

næste opretter vi vores animation. På 0 og 20 procent af vejen gennem vores animation ønsker vi at indstille tilstanden af vores element, når det begynder. Ved at sætte den til 20% af vejen igennem, vil den forblive stille en del af tiden, når den gentages uendeligt.,

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

Vi er nødt til at tilføje startpunktet for opacitet og derefter omdanne både y-positionen og den lodrette skala ved 100% – mærket, slutningen af vores animation. Det sidste, vi skal gøre, er at droppe opaciteten for at falme ud af vores cirkel.

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

endelig anvender vi animationen til cirklen sammen med egenskaben ‘transform-origin’ og egenskaben changeill-change for at tillade hard .areacceleration. Animationsegenskaberne er ret selvforklarende., Cubic-be .ier timingfunktionen bruges til først at trække cirklen tilbage, før den falder til bunden af vores museform; dette tilføjer en legende fornemmelse til animationen.,

Animeret skrive

Klik for at se animation i handling
  • Som det ses på: Have Otte
  • Se koden for de veje og tekst
  • Forfatter: Steven Roberts

Haven Otte websted anvender et fælles animation teknik, hvorved teksten ser ud til at være skrevet ud. For at opnå effekten vender vi os til SVG. Til at begynde med opretter vi SVG., Der er to tilgange her: konverter teksten til stier for at animere dem eller bruge SVG-tekst. Begge tilgange har deres fordele og ulemper.

Start med at oprette vores keyframe-animation. Den eneste funktion, vi har brug for den til at udføre, er at ændre stroke-dashoffset. Nu har vi oprettet vores animation, vi skal anvende de værdier, vi vil animere fra. Vi sætter slagtilfælde-dasharray, som vil skabe huller i slagtilfælde. Vi ønsker at indstille vores slag til at være en stor nok værdi til at dække hele elementet og til sidst modregne bindestregen med slaglængden.,

magien sker, når vi anvender vores animation. Ved at animere offset bringer vi slagtilfældet til syne-skaber en tegningseffekt. Vi ønsker, at elementerne skal tegne en ad gangen, med en vis overlapning mellem slutningen af tegningen af det ene element og begynder at tegne det næste. For at opnå dette henvender vi os til Sass/SCSS og nth-of-type for at forsinke hvert bogstav med halvdelen af animationens længde multipliceret med placeringen af det pågældende bogstav.,

Flyvende fugle

  • Som det ses på: Fournier Père et Fils
  • Se koden for en enkelt fugl eller hele flokken
  • Forfatter: Steven Roberts

Vi starte med helt lige vektor linjer, tegning af hver frame af vores animation, skildrer fugl i en anden tilstand af flyvningen. Vi manipulerer derefter vektorpunkterne og runder linjerne og kanterne. Endelig sætter vi hver ramme i en lige stor kasse og placerer dem side om side. Eksporter filen som en SVG.

HTML-opsætningen er virkelig enkel., Vi skal bare pakke hver fugl i en beholder for at anvende flere animationer – en til at få fuglen til at flyve og den anden til at flytte den over skærmen.

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

Vi anvender vores fugl SVG som baggrund for vores fugl div og vælger den størrelse, vi ønsker, at hver ramme skal være. Vi bruger bredden til groft at beregne den nye baggrundsposition. SVG har 10 celler, så vi multiplicerer vores bredde med 10 og ændrer derefter antallet lidt, indtil det ser korrekt ud.

CSS animation har et par tricks, du måske ikke er opmærksom på., Vi kan bruge animation-timing-funktionen til at vise billedet i trin-ligesom flicking gennem sider i en notesbog for at henvise til animation.

nu har vi oprettet vores fluecyklus, vores fugl flapper i øjeblikket sine vinger, men går ikke overalt. For at flytte hende hen over skærmen opretter vi en anden keyframe-animation. Denne animation vil flytte fuglen hen over skærmen vandret, samtidig med at den ændrer den lodrette position og skalaen for at gøre det muligt for fuglen at slynge sig mere realistisk.

Når vi har oprettet vores animationer, skal vi blot anvende dem., Vi kan oprette flere kopier af vores fugl og anvende forskellige animationstider og forsinkelser. 

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

Cross min hamburger

  • Som det ses på: Bedre Brand Agency
  • Se koden for den spænder og SVG
  • Forfatter: Steven Roberts

Denne animation er anvendt over nettet, drejning tre linjer i et kryds eller luk-ikonet., Indtil for nylig er størstedelen af implementeringer opnået ved hjælp af HTML – elementer, men SVG er faktisk meget mere velegnet til denne form for animation-der er ikke længere behov for at opblåse din knappekode med flere spændinger.

På grund af den animerbare natur og SVG og dens navigerbare DOM, ændres koden til at udføre animationen eller overgangen meget lidt – teknikken er den samme.

Vi starter med at oprette fire elementer, det være sig spænder inde i en div eller stier inde i en SVG., Hvis vi bruger spændvidder, skal vi bruge CSS til at placere dem inde i div; hvis vi bruger SVG, er dette allerede taget hånd om. Vi ønsker at placere linjer 2 og 3 i midten – den ene oven på den anden – mens afstanden linjer 1 og 4 jævnt over og under, og sørg for at centrere transformens Oprindelse.

Vi vil stole på at overføre to egenskaber: opacitet og rotation. Først og fremmest ønsker vi at falme ud linjer 1 og 4, som vi kan målrette ved hjælp af :nth-child selector.,

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

det eneste, der er tilbage at gøre, er at målrette de to midterste linjer og rotere dem 45 grader i modsatte retninger.

Jagter cirkler

  • Som det ses på: Bedre Brand Agency
  • Se koden
  • Forfatter: Steven Roberts

Den animerede ilægning af ikonet består af fire cirkler. Cirklerne har ingen fyld, men har skiftende slagfarver.

i Vores CSS kan vi indstille nogle grundlæggende egenskaber til alle vores cirkler og derefter bruge :nth-of-type vælgeren til at anvende en anden stroke-dasharray til hver cirkel.,

Dernæst skal vi oprette vores keyframe-animation. Vores animation er virkelig enkel: alt, hvad vi skal gøre, er at rotere cirklen med 360 grader. Ved at placere vores transformation på 50% mærket af animationen, vil cirklen også rotere tilbage til sin oprindelige position.

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

Med vores animation oprettet, skal vi nu bare anvende den på vores cirkler. Vi sætter animationen navn; varighed; iteration tæller og timing funktion. Den ‘lethed-In-out’ vil give animationen en mere legende fornemmelse.,

i øjeblikket har vi vores læsser, men alle elementerne roterer sammen på samme tid. For at løse dette anvender vi nogle forsinkelser. Vi opretter vores forsinkelser ved hjælp af en Sass for loop.

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

På grund af forsinkelserne animerer vores cirkel nu igen og skaber illusionen om, at cirklerne jager hinanden. Det eneste problem med dette er, at når siden først indlæses, er cirklerne statiske, så begynder de at bevæge sig en ad gangen. Vi kan opnå den samme forskydningseffekt, men stoppe den uønskede pause i vores animation ved blot at indstille forsinkelserne til en negativ værdi.,

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

Next page: More CSS animation examples to explore