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

Animationselementer, der har klassen baglæns og fremad, har en bestemt animation anvendt på dem. Dette trin definerer den animation, der skal anvendes på spændingselementer, hvis overordnede container har begge Animeret og tilbage eller fremad klasse.

Bemærk, hvordan der ikke er noget mellemrum mellem Animeret og tilbage klassereference, hvilket betyder, at det overordnede element skal have begge dele.

Den blandede animation defineres ved hjælp af de samme indstillinger, der bruges til fremad og bagudgående animationer. I stedet for at anvende animationerne på hvert barn af forældrene, niende barn vælgeren bruges til at anvende skiftende animationsindstillinger. Den bagudgående animation anvendes på alle også selvom -nummer barn, mens den fremadgående animation anvendes på alle ulige -antal barn.

De animationer, vi lige har oprettet, er lavet med en initial ' fra startposition uden lodret position eller rotation. Det ' til 'position 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 uleselig på grund af overlapning i blandede animationer.

06. Flip book

• Forfatter: Adam Kuhn

Når man animerer med CSS, er det sommetider nødvendigt med en død enkel tilgang. Og der er få enklere animationsmetoder end flip-bogen. Ved brug af trin () som vores timing-funktion er vi i stand til at replikere denne effekt. Selvom dette måske lyder hakket og direkte modsiger vores mission om at opretholde fluiditet, kan det med den rette tempo føles lige så problemfrit organisk.

Så hvordan fungerer det? Vi definerer vores animationsfunktionsfunktion med blot nogle få yderligere 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 f.eks. Lidt sådan ud trin (10, start) .

Inden for vores nøglerammer kan vi nu udpege et slutpunkt på vores animation: Lad os i dette eksempel antage, at vores animation er 10 sekunder lang, og vi bruger 10 trin. I dette tilfælde vil hvert trin være ét sekund langt og straks flytte til den følgende ramme på et sekund uden overgang imellem.

Igen ser det ud til at flyve over for fluiditet, men her er trinede 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 kompilere dem på et enkelt vandret (eller lodret) billede, kan vi indstille dette billede som elementbaggrund og definere en pixel eller procent baggrundsposition som et slutpunkt til vores animation, hvilket tillader et enkelt trin for hver ramme. Sprite-arket skifter derefter og udfylder elementet ramme for ramme med et nyt baggrundsbillede baseret på dets position.

Lad os se på et eksempel. I dette tilfælde er nogle sæt animerede ben vedhæftet nogle teksttegn. Først definerer vi vores animationsnavn, varighed, trinoptælling, startposition og iterationstælling:

Igen skal du bemærke, at varigheden er relativt hurtig på mindre end et helt sekund for 32 rammer i alt. Dernæst definerer vi vores nøglerammer:

Bemærk, at billedets lodrette placering er konsistent overalt, hvilket fortæller os, at sprites er vandret strakt over billedet, hvilket er 1280 px i total bredde. Da vi har defineret 32 ​​rammer i alt for det billede, kan vi udlede, at hver ramme skal være 40 px bred. Tjek dette Codepen nedenfor.

Det er vigtigt at bemærke, at et stort sprite ark potentielt kan være en alvorlig 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 jævn animation, der er i stand til at formidle komplekse bevægelser.

07. Blæser bobler

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

CSS-bobleanimationen, der findes på 7UP, er et smukt eksempel på at gennemføre et mærketema ind på webstedsdesignet. Animationen består af et par elementer: SVG 'tegning' af boblerne og derefter to animationer anvendt på hver boble.

Den første animation ændrer boblens opacitet og flytter den lodret i visningsfeltet; det andet skaber den woblende effekt for ekstra realisme. Forskydningerne håndteres ved at målrette mod hver boble og anvende en anden varighed og forsinkelse af animationen.

For at skabe vores bobler bruger vi SVG . I vores SVG opretter vi to lag bobler: et til de større bobler og et til de mindre bobler. Inde i SVG placerer vi alle vores bobler i bunden af ​​visningsboksen.

For at anvende to separate animationer på vores SVG'er, begge ved hjælp af transform-egenskaben, er vi nødt til at anvende animationerne på separate elementer. Det element i SVG kan bruges ligesom en div i HTML; vi er nødt til at pakke hver af vores bobler (som allerede er i en gruppe) i et gruppemærke.

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.

For at skabe en wobbling-effekt er vi simpelthen nødt til at flytte (eller oversætte) boblen til højre og lige med den rigtige mængde - for meget får animationen til at se for jævne ud og frakoblet, mens for lidt for det meste går ubemærket hen. Eksperimentering er nøglen til, når du arbejder med animation.

For at anvende animationen på vores bobler bruger vi de grupper, vi brugte tidligere og hjælp fra n-type at identificere hver boblegruppe individuelt. Vi starter med at anvende en opacitetsværdi på boblerne og vil ændre sig ejendom for at udnytte hardwareacceleration.

Vi ønsker at holde alle animationstider og forsinkelser inden for et par sekunder fra hinanden og indstille dem til at gentage det uendeligt. Endelig anvender vi let ind-ud timing funktion til vores wobble animation for at få den til at se lidt mere naturlig ud.

08. Rulende mus

• Som det ses på: Baltisk træning
• Se koden
• Forfatter: Steven Roberts

En subtil rullende museanimation kan give brugeren retning, når de først lander på et websted. Selvom dette kan opnås ved hjælp af HTML-elementer og egenskaber, skal vi bruge SVG, da dette er mere egnet til at tegne.

Inde i vores SVG har vi brug for et rektangel med afrundede hjørner og en cirkel til det element, vi skal animere. Ved at bruge SVG kan vi skalere ikonet til den størrelse, vi har brug for.

Nu har vi oprettet vores SVG, vi er nødt til at anvende nogle enkle stilarter for at kontrollere ikonets størrelse og placering i vores container. Vi har pakket et link omkring SVG'en til musen og placeret det nederst på skærmen.

Derefter opretter vi vores animation. Ved 0 og 20 procent af vejen gennem vores animation ønsker vi at indstille tilstanden for vores element, når det begynder. Ved at indstille den til 20% af vejen igennem forbliver den stille en del af tiden, når den gentages uendeligt.

Vi er nødt til at tilføje uigennemsigtigt startpunkt og derefter transformere både Y-positionen og den lodrette skala ved 100% -mærket, slutningen af ​​vores animation. Den sidste ting, vi skal gøre, er at droppe uigennemsigtigheden for at falme vores cirkel ud.

Endelig anvender vi animationen på cirklen sammen med egenskaben 'transform-origin' og vil ændre sig egenskab for at tillade hardwareacceleration. Animationsegenskaberne er ret selvforklarende. Det kubisk-bezier timing-funktion 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.

09. Animeret skrivning

• Som det ses på: Have otte
• Se koden til stier og tekst
• Forfatter: Steven Roberts

Garden Eight-webstedet bruger en almindelig animationsteknik, hvorved tekst ser ud til at blive 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 brug SVG-tekst. Begge tilgange har deres fordele og ulemper.

Start med at oprette vores keyframe-animation. Den eneste funktion, vi har brug for for at udføre, er at ændre slagtilfælde-dashoffset . Nu har vi oprettet vores animation, og vi skal anvende de værdier, vi vil animere fra. Vi indstiller slagtilfælde-dasharray , som vil skabe huller i slagtilfælde. Vi ønsker at indstille vores slagtilfælde til at være en stor nok værdi til at dække hele elementet og endelig udligne bindestreg med længden af ​​slaglængden.

Magien sker, når vi anvender vores animation. Ved at animere forskydningen bringer vi streget til syne - hvilket skaber en tegningseffekt. Vi ønsker, at elementerne tegner et ad gangen, med en vis overlapning mellem slutningen af ​​at tegne det ene element og begynder at tegne det næste. For at opnå dette henvender vi os til Sass / SCSS og n-type at forsinke hvert bogstav med halv længden af ​​animationen ganget med placeringen af ​​det pågældende bogstav.

10. Flyvende fugle

• Som det ses på: Fournier far og søn
• Se koden for en enkelt fugl eller den hele flokken
• Forfatter: Steven Roberts

Vi starter med helt lige vektorlinjer, der tegner hver enkelt ramme i vores animation og skildrer fuglen i en anden flyvetilstand. Vi manipulerer derefter vektorpunkterne og afrunder linjerne og kanterne. Endelig lægger vi hver ramme i en lige stor boks og placerer dem side om side. Eksporter filen som en SVG.

HTML-opsætningen er virkelig enkel. Vi er bare nødt til at pakke hver fugl i en container for at anvende flere animationer - en for at få fuglen til at flyve og den anden for at flytte den hen over skærmen.

Vi anvender vores fugles SVG som baggrund for vores fuglediv og vælger den størrelse, vi vil have hver ramme. Vi bruger bredden til groft at beregne den nye baggrundsposition. SVG har 10 celler, så vi gange vores bredde med 10 og ændrer derefter antallet let, indtil det ser korrekt ud.

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

Nu har vi oprettet vores flyve-cyklus, vores fugl klapper i øjeblikket med sine vinger, men går ingen steder. For at flytte hende hen over skærmen opretter vi en ny keyframe-animation. Denne animation vil flytte fuglen tværs over skærmen vandret, mens den også ændrer den lodrette position og skalaen, så fuglen kan bugtes 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.

11. Kryds min hamburger

• Som det ses på: Better Brand Agency
• Se koden til spænder og SVG
• Forfatter: Steven Roberts

Denne animation bruges overalt på nettet og omdanner tre linjer til et kryds- eller lukkeikon. Indtil for nylig er størstedelen af ​​implementeringerne opnået ved hjælp af HTML-elementer, men SVG er faktisk meget mere egnet til denne form for animation - der er ikke længere behov for at blæse din knappekode med flere spænd.

På grund af den animerede 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, hvad enten det strækker sig 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 linie 2 og 3 i midten - den ene oven på den anden - mens linjerne 1 og 4 placeres jævnt over og under, og sørg for at centrere transformationsoprindelsen.

Vi vil stole på at overføre to egenskaber: opacitet og rotation. Først og fremmest ønsker vi at fade linier 1 og 4 ud, som vi kan målrette mod ved hjælp af : niende barn vælger.

Det eneste, der er tilbage, er at målrette mod de to midterste linjer og dreje dem 45 grader i modsatte retninger.

12. Jager cirkler

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

Det animerede indlæsningsikon består af fire cirkler. Cirklerne har ingen udfyldning, men har skiftende stregfarver.

I vores CSS kan vi indstille nogle grundlæggende egenskaber til alle vores cirkler og derefter bruge : n-type vælger til at anvende en anden slagtilfælde-dasharray til hver cirkel.

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

Med vores animation oprettet, skal vi nu bare anvende den i vores cirkler. Vi indstiller animationsnavnet; varighed; iterationstælling og timingfunktion. 'Let-i-ud' 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.

På grund af forsinkelserne animerer vores cirkel nu igen og skaber illusionen om, at cirklerne jagter hinanden. Det eneste problem med dette er, at når siden først indlæses, er cirklerne statiske, så de begynder 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 sætte forsinkelserne til en negativ værdi.

Næste side: Flere CSS-animationseksempler at udforske

• 1
• to

Nuværende side: CSS animation tutorials