25 šaunūs CSS animacijos pavyzdžiai atkurti

css animacijos pelės pavyzdys
(Vaizdo kreditas: Donovan Hutchinson)
Puslapis 1 iš 2: CSS animacijos pamokos

Gerai naudojama CSS animacija yra nepaprastai naudinga ir galinga priemonė. Tai gali suteikti susidomėjimo ar kūrybinio jaudulio, nukreipti vartotojo žvilgsnį, greitai ir trumpai ką nors paaiškinti ir pagerinti naudojimąsi. Dėl šios priežasties pastaraisiais metais vis daugiau animacijos rodoma svetainėse ir programose.

Šiame straipsnyje apibendriname keletą šauniausių CSS animacijos pavyzdžių, kuriuos matėme, ir parodysime, kaip juos atkurti. Skaitykite toliau, norėdami ištirti įvairias išsamias mokymo programas ir įkvepiančius efektus (ir nuorodas į jų kodą).

Kas yra CSS animacija?

CSS animacija yra būdas tam tikriems HTML elementams animuoti nenaudojant procesoriaus ir atminties ištroškusio „JavaScript“ ar „Flash“. CSS ypatybių, kurias galima keisti, skaičius ar dažnis neribojamas. CSS animacijos pradedamos nurodant animacijos pagrindinius kadrus: šiuose pagrindiniuose kadruose yra stiliai, kuriuos elementas turės.



Nors animacijos srityje tai gali pasirodyti ribota, CSS iš tikrųjų yra tikrai galingas įrankis ir gali sukurti gražiai sklandžią 60 kadrų per sekundę animaciją. „Pristatyti apgalvotas, sklandžias animacijas, kurios suteikia prasmingą jūsų svetainės gylį, neturi būti sunku“, - sako žiniatinklio kūrėjas Adamas Kuhnas. „Šiuolaikinės CSS ypatybės suteikia jums beveik visus įrankius, kurių reikės norint įsiminti savo vartotojams.“

Geriausios animacijos šaknys tebėra „Disney“ klasikoje 12 animacijos principų - visuose šiuose CSS animacijos pavyzdžiuose pamatysite keletą to paminėjimų, todėl prieš pradėdami verta patikrinti tą straipsnį. Taip pat galbūt norėsite ištirti mūsų puikų turinį animaciniai muzikiniai vaizdo įrašai daugiau pavyzdžių ir įkvėpimo.

Auksinė taisyklė yra ta, kad jūsų CSS animacijos neturėtų būti per daug išpūstos - net ir nedidelis judesys gali turėti didelę įtaką, o per didelis kiekis gali blaškyti ir dirginti vartotojus. Čia yra mūsų mėgstamiausi pavyzdžiai ir kaip juos atkurti.

01. Linksmas pelės efektas

Tai yra įdomus efektas, sekantis aplink pelę. Tai gali būti naudinga, kai norite atkreipti dėmesį į savo puslapio elementą.

Šiam efektui mums reikia labai nedaug HTML:

Pirma, mes išdėstome demonstracinę versiją ir nustatome 3D transformacijos perspektyvą:

.demo { background-color: hsl(207, 9%, 19%); display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; } .perspective-container { perspective: 800px; }

Tada suformuokite div, kurį norime animuoti:

.card { background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif); background-size: cover; box-shadow: 0 0 140px 10px rgba(0,0,0,.5); position: relative; height: 300px; width: 500px; overflow: hidden; /* Try removing this to see how the sheen works! */ --sheenX: 0; /* Set these with JavaScript */ --sheenY: 0; }

Čia mes nustatome foną, tada mes nustatome perpildyti į paslėptas kad galėtume pridėti a blizgesys poveikis vėliau. Mes taip pat nustatėme css kintamieji , sheenX ir blizgesys .

Šie blizgesio kintamieji padės nustatyti blizgesio efektą. Mes naudojame juos savo kortelėse po to pseudoelementas:

.card::after { content: ''; position: absolute; top: -400px; right: -400px; bottom: -400px; left: -400px; background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%); transform: translateX(var(--sheenX)) translateY(var(--sheenY)); }

Čia mes įsitikiname, kad pseudo elementas yra didesnis nei konteineris. Tai suteiks mums ką nors slysti ant viršaus kortelę naudojant transformuotis .

The transformuotis nuosavybė naudoja tuos CSS kintamuosius, kuriuos nustatėme anksčiau. Mes nustatysime tuos, kurie naudoja „JavaScript“. Nustatykime „JavaScript“, kad pirmiausia klausytumėtės pelės įvykių:

document.onmousemove = handMouseMove;

Dabar mums reikia a „handMouseMove“ funkcija onmousemove :

function handleMouseMove(event) { const height = window.innerHeight; const width = window.innerWidth; // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top) const yAxisDegree = event.pageX / width * 40 - 20; const xAxisDegree = event.pageY / height * -1 * 40 + 20; target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`; // Set the sheen position setSheenPosition(event.pageX / width, event.pageY / width); }

Mūsų funkcija nurodo lango aukštį ir plotį ir sukuria kampą X ir Y ašyse. Tada mes juos nustatėme į transformuotis mūsų stilius kortelę . Tai suteikia kortai kampą, pagrįstą pele!

Mes paskui iškviečiame funkciją pseudo elemento padėčiai nustatyti:

function setSheenPosition(xRatio, yRatio) { // This creates a 'distance' up to 400px each direction to offset the sheen const xOffset = 1 - (xRatio - 0.5) * 800; const yOffset = 1 - (yRatio - 0.5) * 800; target.style.setProperty('--sheenX', `${xOffset}px`) target.style.setProperty('--sheenY', `${yOffset}px`) }

Mūsų pseudoelementas geriausiai atrodo, kai jis juda priešinga pelės kryptimi. Norėdami tai pasiekti, mes sukuriame skaičių nuo -0,5 iki 0,5, kuris keičiasi priešinga kryptimi, apskaičiuojant santykį -1.

Padauginame šį skaičių iš 800, nes norime, kad jis padidėtų iki didžiausio 400 taškų , kiek mes nustatėme blizgesys pseudoelementas už kortelę .

Galiausiai mes nustatėme šias kompensuojamas vertes savo CSS kintamųjų savybėms, o naršyklės atvaizdavimo priemonė atlieka visa kita.

Dabar mes turime kortelę, kuri atsisuka į mūsų pelės pusę, o blizgesio efektas virsta priešinga kryptimi. Tai sukuria malonų, akį traukiantį efektą.

02. Didysis atskleisti

  • Autorius: Adamas Kuhnas

Atrodo, kad animacinis turinys atskleidžia efektus šiuo metu gana populiarus ir tinkamai naudojamas, kad pritrauktų dėmesį į vartotoją ir pritrauktų jūsų auditoriją. Jūs matėte tai anksčiau: spalvų blokas auga iš vienos ar kitos pusės horizontaliai arba vertikaliai, o tada atsitraukia į priešingą pusę, šį kartą atskleisdamas po juo tekstą ar vaizdą. Tai koncepcija, kuri gali pasirodyti kebli, tačiau iš tikrųjų remiasi tik keliais dalykais.

Pirmiausia nustatysime elementų išdėstymą ( atsisiųskite visą kodą čia ) - apibrėžkite jį kaip santykinį (šiuo atveju nepavyks tik statinis). Teksto atvejais geriausia leisti automatinį aukštį ir plotį, nors šiokia tokia pakuotė nepakenkia. Mes taip pat apibrėžsime transformacijos kilmę, jei pagrindinis elementas norime naudoti pradinę padėtį. Kadangi norime, kad elementas būtų paslėptas iš pradžių, naudosime mastelio transformaciją išilgai atitinkamos ašies, kad jį sutrumpintume.

Toliau - pseudo elementas, kuris užmaskuoja mūsų tėvus, nustatydamas transformacijos kilmę į priešingą variantą. Galiausiai sujunkite animacijas naudodamiesi laiko funkcijomis arba vėlavimais, kad kompensuotumėte kiekvieną.

Atkreipkite dėmesį, kad pagrindinio ir pseudo elemento animacijas kompensavome uždelsdami, kad laukelis, kuris slepia mūsų tekstą, atskleistų jį tik po to, kai pats elementas bus visiškai pakeistas į rodinį. Peržiūrėkite toliau pateiktą „Codepen“.

03. Nusileisk

  • Autorius: Adamas Kuhnas

Kai pradėsite kaupti deramą įvairių palengvinamų fragmentų biblioteką, laikas ieškoti kitų būdų, kaip pagerinti animacijų gylį, ir vienas iš geriausių būdų yra kompensuoti animacinius elementus.

ar galite įdėti vaizdo įrašą į pdf

Pernelyg įprasta, kad „JavaScript“ aktyviklis nustatytas inicijuoti daugybę animacijų pagal slinkties padėtį, kad būtų galima rasti visus elementus, judančius tandemu. Laimei, pati CSS suteikia paprastą savybę, kuri gali suteikti (arba sugadinti) jūsų animacinę patirtį: animacija-delsa .

Tarkime, pavyzdžiui, turime vaizdų tinklelį, kurį norime animuoti į rėmelį, kai vartotojas slenka. Yra keli būdai, kuriais galime tai suaktyvinti, greičiausiai pridedant klases prie elementų, kai jie patenka į peržiūros sritį. Tačiau tai gali būti gana sunkus naršyklės pakėlimas ir to galima išvengti paprasčiausiai pridedant vieną klasę prie konteinerio elemento ir apibrėžiant vaikų elementų vėlavimą.

Tai ypač geras išankstinių procesorių, tokių kaip SCSS ar LESS, naudojimo atvejis, leidžiantis mums naudoti a @dėl kilpa kartoti kiekvieną 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; } } } }

Čia pamatysite, kad naudodamiesi SCSS galime persvarstyti kiekvieną iš jų : n-tasis tipas parinkiklį, tada pritaikykite animacijos uždelsimą pagal kiekvieno antrinio elemento skaitinę vertę. Tokiu atveju pastebėsite, kad paskirstysime laiką, kad kiekvienas prieaugis būtų sumažintas iki sekundės trupmenos. Nors animuotų elementų įskaitymas gali suteikti emocijų jūsų animacijai, per didelis delsimas gali jaustis nesusijęs. Peržiūrėkite šį „CodePen“ žemiau.

04. Squigglevision

  • Autorius: Adamas Kuhnas

SVG filtrai yra puikus būdas pasiekti natūralų, rankomis piešiamą pojūtį ir išvengti vien tik CSS vienodo jausmo perteikimo apribojimų. Jų animacija gali dar labiau sustiprinti efektą.

Šiuo atveju: „Squigglevision“. Taip, tai nėra techninis terminas, žinomas daugumai animatorių, bet jūs tikrai matėte, kad jis naudojamas animaciniuose filmuose. Idėja yra ta, kad šių animacinių elementų kraštai yra ne tik šiek tiek nelygūs ir šiurkšti, bet ir šiurkštūs kraštai greitai keičiasi, kadras po rėmo, todėl jie jaučiasi taip, tarsi būtų išplėšti iš eskizų knygos puslapių ir atnešti gyvenimo.

Norėdami pasiekti šį efektą, į savo puslapį galime įtraukti SVG su keliais filtrais ir nedideliais kiekvieno turbulencijos lygių pokyčiais. Tada mes nustatysime savo animacijos laiko juostą, pakviesdami kiekvieną filtrą į savo pagrindinį kadrą. Svarbu žaisti su laiko trukme, nes mes tikimės, kad animacija jausis „šokinėjanti“, bet nenorite, kad ji būtų tokia lėta, kad jaustųsi ne taip ar greitai, kad jaustųsi beprotiška.

Tuo tikslu svarbu pažymėti, kad CSS neturi galimybės sklandžiai pereiti tarp SVG filtrų, nes nėra galimybės pasiekti tokių savybių kaip turbulencija ir mastelis, todėl reikėtų tikėtis, kad tokio tipo animacijos visada bus nerimastingos.

05. Tumbling raidės

CSS animacija: burbuliniai laiškai

„Google“ metų žaidime pagrindiniame puslapyje pateikiama žaisminga CSS animacija, kurios pavadinimo žodžiai sukasi ir atsitrenkia vienas į kitą. Štai kaip tai buvo padaryta.

Pirmiausia reikia apibrėžti tinklalapio dokumentą naudojant HTML. Jį sudaro HTML dokumentų konteineris, kuriame saugoma galvos ir kūno dalis. Nors antraštės skyrius naudojamas išoriniams CSS ir „JavaScript“ ištekliams įkelti, tekstas naudojamas puslapio turiniui saugoti.

Off Kilter Text Animation

The Animated Title

The Animated Title

The Animated Title

Puslapio turinį sudaro trys „h1“ pavadinimo žymos, kurios parodys skirtingus animacijos efekto variantus. Nors į šias žymes galima įterpti bet kokį tekstą, jų animaciją apibūdina klasės atribute esantys vardai. Šių klasių pavadinimų pristatymo ir animacijos nustatymai bus apibrėžti CSS vėliau.

Tada sukurkite naują failą pavadinimu „ kodas.js '. Mes norime rasti visus puslapio elementus su Animacinis klasę ir sukurti masyvas kiekvieno vidinio teksto žodžio sąrašas. Pradinis animacijos uždelsimas taip pat apibrėžiamas šiame žingsnyje. Puslapio turinys negalimas, kol puslapis bus visiškai įkeltas, todėl šis kodas dedamas lango viduje apkrova renginių klausytojas.

kaip importuoti Photoshop sluoksnius į efektus

Animacinių elementų žodinis turinys turi būti a viduje ruožas elementas. Norėdami tai padaryti, esamas HTML turinys atstatomas į tuščią, tada naudojama kilpa, kad žodis, esantis nustatytuose „žodžių“ sąraše, taptų span elementu. Be to, animacijaDelay taikomas stilius - apskaičiuojamas atsižvelgiant į pradinį vėlavimą (nurodytą žemiau) ir žodžio rodyklės padėtį.



window.addEventListener('load', function(){ var delay = 2; var nodes = document.querySelectorAll ('.animate'); for(var i=0; i

Sukurkite naują failą pavadinimu stiliai.css . Dabar mes nustatysime pateikimo taisykles, kurios bus kiekvieno animacijos žodžio elemento dalis, valdoma jų žymos. Pateikiant bloką kartu su centruotu teksto lygiavimu, kiekvienas žodis bus rodomas atskiroje eilutėje, horizontaliai sulygintoje su konteinerio viduriu. Santykinis padėties nustatymas bus naudojamas animacijai jo atžvilgiu teksto srautas poziciją.

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

Animacijos elementams, turintiems atgal ir į priekį klasę, jiems taikoma specifinė animacija. Šiame žingsnyje apibrėžiama animacija, taikoma tiems elementams, kurių pagrindiniame sudėtiniame rodinyje yra ir Animacinis ir atgal arba pirmyn klasė.

Atkreipkite dėmesį, kaip tarp tarpo nėra vietos Animacinis ir atgal klasės nuoroda, tai reiškia, kad pagrindinis elementas turi turėti abu.

.animate.backwards > span{ animation: animateBackwards 1s ease-in-out forwards; } .animate.forwards > span{ animation: animateForwards 1s ease-in-out forwards; }

Mišri animacija apibrėžiama naudojant tuos pačius nustatymus, naudojamus pirmyn ir atgal animacijoms. Užuot pritaikius animacijas kiekvienam iš tėvų vaikų, n-tasis vaikas selektorius naudojamas kintantiems animacijos nustatymams taikyti. Ankstesnė animacija taikoma kiekvienam net -skaičius vaikas, o priekinė animacija taikoma kiekvienam nelyginis -skaičius vaiko.

.animate.mixed > span:nth-child(even){ animation: animateBackwards 1s ease-in-out forwards; } .animate.mixed > span:nth-child(odd){ animation: animateForwards 1s ease-in-out forwards; }

Ką tik sukurtos animacijos yra daromos su pradiniu nuo 'pradinė padėtis be vertikalios padėties ar sukimosi reguliavimo. „ į 'pozicija yra galutinė animacijos būsena, nustatanti elementus su koreguota vertikalia padėtimi ir sukimosi būsena. Abiem animacijoms naudojami šiek tiek skirtingi pabaigos nustatymai, kad tekstas taptų neįskaitomas dėl mišrių animacijų sutapimo.

@keyframes animateForwards { from { top: 0; transform: rotate(0deg); } to { top: .9em; transform: rotate(-15deg); } } @keyframes animateBackwards { from { top: 0; transform: rotate(0deg); } to { top: 1em; transform: rotate(25deg); } }

06. Apversti knygą

  • Autorius: Adamas Kuhnas

Animuojant su CSS, kartais reikalingas negyvas paprastas požiūris. Ir yra nedaug paprastesnių animacinių metodų nei knyga. Naudojant žingsniai () kaip mūsų laiko funkciją, mes galime pakartoti šį efektą. Nors tai gali pasirodyti nerami ir tiesiogiai prieštarauti mūsų misijai išlaikyti sklandumą, tinkamu žingsniu tai gali atrodyti taip pat sklandžiai organiška.

Taigi kaip tai veikia? Mes apibūdiname animacijos palengvinimo funkciją tik su keliais papildomais parametrais - nurodome animacijai, kiek žingsnių reikia ir kuriuo momentu norime pradėti pirmą žingsnį. (pradžia, pabaiga) - pavyzdžiui, šiek tiek panašus žingsniai (10, pradžia) .

Pagrindiniuose kadruose dabar galime nurodyti savo animacijos galinį tašką: tarkime, kad šiame pavyzdyje mūsų animacija yra 10 sekundžių ilgio ir mes naudojame 10 žingsnių. Tokiu atveju kiekvienas žingsnis bus vienas sekundės ilgio, tuoj pat pereinantis į sekantį vienos sekundės kadrą be perėjimo tarp.

Vėlgi, atrodo, kad tai skrieja nepaisant sklandumo, tačiau štai kur pakopinės animacijos tikrai gali spindėti. Mes galime palaipsniui kartoti per „sprite“ lapą ir animuoti kadrą po kadro, kaip ir knygelę. Apibrėždami vienodo dydžio rėmus, bet sudėdami juos į vieną horizontalų (arba vertikalų) vaizdą, mes galime nustatyti šį vaizdą kaip elemento foną ir apibrėžti taško arba procentinę fono padėtį kaip mūsų animacijos galinį tašką, suteikdami kiekvienam žingsnį po vieną. rėmas. Tada „sprite“ lapas pasislinks ir elementą kadre po kadro užpildys nauju fono vaizdu, atsižvelgiant į jo padėtį.

Pažvelkime į pavyzdį. Šiuo atveju kai kurie animuotų kojų rinkiniai pridedami prie kai kurių teksto simbolių. Pirmiausia nustatysime savo animacijos pavadinimą, trukmę, žingsnių skaičių, pradžios padėtį ir iteracijų skaičių:

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

Vėlgi, atkreipkite dėmesį, kad 32 kadrų trukmė yra gana greita ir trunka mažiau nei vieną sekundę. Tada mes apibrėžsime pagrindinius kadrus:

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

Atkreipkite dėmesį, kad vertikali vaizdo padėtis yra vienoda, o tai rodo, kad atvaizdai yra horizontaliai ištempti per visą vaizdą, kurio bendras plotis yra 1280 taškų. Kadangi mes apibrėžėme 32 viso vaizdo kadrus, galime daryti išvadą, kad kiekvienas kadras turi būti 40 taškų pločio. Peržiūrėkite šį „Codepen“ žemiau.

Svarbu pažymėti, kad didelis „sprite“ lapas gali labai pakenkti našumui, todėl būtinai dydykite ir suglaudinkite vaizdus. Turėdami gerai sukurtą „sprite“ lapą ir tinkamą animacijos trukmę, jūs turite sklandžią animaciją, galinčią perteikti sudėtingus judesius.

07. burbulų pūtimas

„CSUP“ burbulų animacija, rodoma „7UP“, yra puikus pavyzdys, kaip prekės ženklo tema perkeliama į svetainės dizainą. Animaciją sudaro keli elementai: SVG burbulų „piešimas“ ir po dvi animacijas, pritaikytas kiekvienam burbului.

Pirmoji animacija keičia burbulo neskaidrumą ir perkelia jį vertikaliai rodinio laukelyje; antrasis sukuria klibantį papildomo realizmo efektą. Poslinkiai atliekami taikant kiekvieną burbulą ir pritaikant skirtingą animacijos trukmę ir uždelsimą.

Norėdami sukurti savo burbulus, kuriuos naudosime SVG . Savo SVG mes sukuriame du burbuliukų sluoksnius: vieną didesniems ir mažesniems. SVG viduje mes visus savo burbuliukus išdėstome peržiūros langelio apačioje.

... ...

Norėdami pritaikyti dvi atskiras animacijas savo SVG, naudodamiesi transformacijos ypatybe, turime pritaikyti animacijas atskiriems elementams. The elementas SVG gali būti naudojamas panašiai kaip div HTML; kiekvieną savo burbulą (kurie jau yra grupėje) turime suvynioti į grupės žymą.

CSS turi galingą animacijos variklį ir tikrai paprastą kodą, kad būtų sukurtos sudėtingos animacijos. Mes pradėsime burbulų perkėlimą į viršų ekranu ir jų neskaidrumo keitimą, kad animacijos pradžioje ir pabaigoje jie išnyktų ir išnyktų.

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

Norėdami sukurti klibantį efektą, mes tiesiog turime perkelti (arba išversti) burbulą į kairę ir į dešinę, tik reikiamu kiekiu - per daug animacija atrodys pernelyg linksma ir atjungta, o per mažai - daugiausiai nepastebėsite. Eksperimentai yra svarbiausi dirbant su animacija.

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

Norėdami pritaikyti animaciją savo burbulams, naudosime anksčiau naudojamas grupes ir jų pagalbą n-tasis tipas identifikuoti kiekvieną burbulų grupę atskirai. Pradedame taikydami burbuliukams ir neskaidrumo vertę pasikeis savybę, kad būtų galima naudoti aparatūros pagreitį.

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

Mes norime, kad animacijos laikas ir vėlavimas būtų per kelias sekundes vienas nuo kito ir nustatytume juos kartoti be galo. Galiausiai taikome palengvėjimas mūsų klibėjimo animacijos laiko funkciją, kad ji atrodytų šiek tiek natūraliau.

.bubbles-large g:nth-of-type(1) { animation: up 6.5s infinite; } .bubbles-large g:nth-of-type(1) circle { animation: wobble 3s infinite ease-in-out; } ... bubbles-small g:nth-of-type(9) circle { animation: wobble 3s 275ms infinite ease-in-out; } .bubbles-small g:nth-of-type(10) { animation: up 6s 900ms infinite;}

08. Slinkties pelė

Subtili slenkančios pelės animacija gali suteikti naudotojui nurodymą, kai jis pirmą kartą patenka į svetainę. Nors tai galima pasiekti naudojant HTML elementus ir ypatybes, mes naudosime SVG, nes tai labiau tinka piešimui.

Mūsų SVG viduje mums reikia stačiakampio suapvalintais kampais ir apskritimo elementui, kurį ketiname animuoti, naudodamiesi SVG, mes galime išplėsti piktogramą iki bet kokio mums reikalingo dydžio.

Dabar mes sukūrėme savo SVG, kad galėtume valdyti piktogramos dydį ir padėtį savo talpykloje, turime pritaikyti keletą paprastų stilių. Apvyniojome nuorodą aplink pelės SVG ir padėjome ją ekrano apačioje.

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

Tada sukursime savo animaciją. Kai animacija yra 0 ir 20 procentų, mes norime nustatyti savo elemento būseną, kai ji prasideda. Nustačius 20 proc. Kelio, jis išliks nejudantis dalį laiko, kai jis kartojamas be galo.

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

Turime pridėti neskaidrumo pradžios tašką ir tada transformuoti ir Y padėtį, ir vertikalią skalę ties 100% žyme, animacijos pabaiga. Paskutinis dalykas, kurį turime padaryti, yra atsisakyti neskaidrumo, kad išnyktų mūsų ratas.

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

Galiausiai animacijai pritaikome apskritimą kartu su savybe „transformuoti kilmę“ ir pasikeis savybę, kad būtų galima pagreitinti aparatūrą. Animacijos ypatybės yra savaime suprantamos. The kubinis-bezieris laiko funkcija naudojama norint pirmiausia atitraukti apskritimą prieš nuleidžiant jį į pelės formos apačią; tai animacijai suteikia žaismingumo.

.scroll { animation-name: scroll; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500); animation-iteration-count: infinite; transform-origin: 50% 20.5px; will-change: transform; }

09. Animacinis rašymas

CSS animacijos: rašymas

kaip nemokamai gauti visus vsco filtrus
Spustelėkite norėdami pamatyti animaciją

„Garden Eight“ svetainėje naudojama įprasta animacijos technika, pagal kurią atrodo, kad tekstas yra rašomas. Norėdami pasiekti efektą, mes kreipiamės į SVG. Pirmiausia sukursime SVG. Čia yra du metodai: konvertuokite tekstą į kelius, kad juos animuotumėte, arba naudokite SVG tekstą. Abu požiūriai turi savo pliusų ir minusų.

Pradėkite nuo pagrindinio kadro animacijos sukūrimo. Vienintelė funkcija, kurios mums reikia, yra pakeisti insultas-brūkšnys . Dabar mes sukūrėme savo animaciją, turime pritaikyti vertybes, iš kurių norime animuotis. Mes nustatėme insultas-dasharray , kuris sukurs smūgio spragas. Mes norime nustatyti, kad smūgis būtų pakankamai didelė, kad apimtų visą elementą, ir galiausiai atsvertų brūkšnį smūgio ilgiu.

Magija įvyksta, kai pritaikome savo animaciją. Animuodami poslinkį, mes išryškiname potėpį - sukuriame piešimo efektą. Mes norime, kad elementai pieštų po vieną, šiek tiek sutampant tarp vieno elemento piešimo pabaigos ir pradedant piešti kitą. Norėdami tai pasiekti, mes kreipiamės Sasas / SCSS ir n-tasis tipas atidėti kiekvieną raidę per pusę animacijos ilgio, padauginto iš tos raidės padėties.

10. Skraidantys paukščiai

Pradedame nuo visiškai tiesių vektorinių linijų, piešdami kiekvieną savo animacijos kadrą, vaizduodami paukštį skirtingoje skrydžio būsenoje. Tada mes manipuliuojame vektoriaus taškais ir apvaliname linijas ir kraštus. Galiausiai kiekvieną rėmelį dedame į vienodo dydžio dėžę ir dedame vienas šalia kito. Eksportuokite failą kaip SVG.

HTML sąranka yra tikrai paprasta. Mes tiesiog turime suvynioti kiekvieną paukštį į konteinerį, kad galėtume pritaikyti kelias animacijas - vieną, kad paukštis skristų, o kitą - perkelkite per ekraną.

Mes naudojame savo paukščio SVG kaip foną savo paukščių divui ir pasirenkame dydį, kurio norime būti kiekviename kadre. Norėdami apytiksliai apskaičiuoti naują fono padėtį, naudojame plotį. SVG turi 10 langelių, todėl mes padauginame plotį iš 10, tada šiek tiek keičiame skaičių, kol jis atrodo teisingas.

.bird { background-image: url('bird.svg'); background-size: auto 100%; width: 88px; height: 125px; will-change: background-position; } @keyframes fly-cycle { 100% { background-position: -900px 0; } }

CSS animacija turi keletą gudrybių, kurių galbūt nežinote. Mes galime naudoti animacijos laiko nustatymo funkcija rodyti vaizdą žingsniais - panašiai kaip vartyti sąsiuvinio puslapius, norint užsiminti apie animaciją.

animation-name: fly-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; animation-duration: 1s; animation-delay: -0.5s;

Dabar mes sukūrėme savo musių ciklą, mūsų paukštis šiuo metu plazdena sparnais, bet niekur nedingsta. Norėdami perkelti ją per ekraną, mes sukuriame kitą pagrindinio kadro animaciją. Ši animacija pajudins paukštį per ekraną horizontaliai, taip pat pakeisdama vertikalią padėtį ir mastelį, kad paukštis galėtų realiau vinguriuoti.

Sukūrę savo animacijas, paprasčiausiai turime jas pritaikyti. Mes galime sukurti kelias mūsų paukščio kopijas ir pritaikyti skirtingą animacijos laiką ir vėlavimą.

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

11. Sukryžiuok mano mėsainį

Ši animacija naudojama visame žiniatinklyje, tris eilutes paverčiant kryžiaus ar uždarymo piktograma. Dar visai neseniai dauguma diegimo būdų buvo pasiekti naudojant HTML elementus, tačiau iš tikrųjų SVG yra daug labiau tinkamas tokios rūšies animacijai - nebereikia išpūsti mygtukų kodo keliais diapazonais.

Dėl animuojamo pobūdžio ir SVG bei jo navigacinio DOM, animacijai ar perėjimui atlikti naudojamas kodas kinta labai nedaug - technika yra ta pati.

Pradedame nuo keturių elementų sukūrimo, nesvarbu, ar tai yra „div“ viduje, ar keliuose SVG viduje. Jei mes naudojame span, mes turime naudoti CSS, kad padėtume juos div; jei mes naudojame SVG, tai jau yra pasirūpinta. Mes norime 2 ir 3 linijas išdėstyti centre - vienas ant kito - tuo pačiu atstumu tarp 1 ir 4 linijų aukščiau ir žemiau, užtikrindami transformacijos pradžios centravimą.

Mes remsimės dviem savybėmis: neskaidrumu ir sukimu. Visų pirma, mes norime išbraukti 1 ir 4 eilutes, kurias galime nukreipti naudodami : n-tas vaikas selektorius.

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

Liko tik nukreipti dvi vidurines linijas ir pasukti jas 45 laipsniais priešinga kryptimi.

.menu-icon.is-active {element-type}:nth-child(2) { transform: rotate(45deg); } .menu-icon.is-active {element-type}:nth-child(3) { transform: rotate(-45deg); }

12. Vytis ratus

Animacinio pakrovimo piktogramą sudaro keturi apskritimai. Apskritimai nėra užpildyti, tačiau juose yra kintančios potėpio spalvos.

Savo CSS galime nustatyti kai kurias pagrindines savybes visiems savo ratams ir tada naudoti : n-tasis tipas parinkiklis pritaikyti kitokį insultas-dasharray kiekvienam apskritimui.

circle:nth-of-type(1) { stroke-dasharray: 550; } circle:nth-of-type(2) { stroke-dasharray: 500; } circle:nth-of-type(3) { stroke-dasharray: 450;} circle:nth-of-type(4) { stroke-dasharray: 300; }

Tada turime sukurti savo pagrindinio kadro animaciją. Mūsų animacija yra tikrai paprasta: viskas, ką turime padaryti, tai pasukti apskritimą 360 laipsnių kampu. Pastatydami transformaciją ties 50% animacijos ženklu, apskritimas taip pat pasisuks į pradinę padėtį.

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

Sukūrę animaciją, dabar ją tiesiog turime pritaikyti savo ratams. Mes nustatome animacijos pavadinimą; trukmė; kartojimo skaičiavimo ir laiko funkcija. 'Lengvas išėjimas' suteiks animacijai žaismingesnį jausmą.

animation-name: preloader; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;

Šiuo metu mes turime savo krautuvą, tačiau visi elementai tuo pačiu metu sukasi kartu. Norėdami tai išspręsti, taikysime keletą vėlavimų. Savo vėlavimus sukursime naudodami „Sass for loop“.

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

Dėl vėlavimų mūsų ratas dabar iš eilės animuoja, kurdamas iliuziją, kad apskritimai vijosi vienas kitą. Vienintelė problema yra ta, kad kai puslapis pirmą kartą įkeliamas, apskritimai yra statiški, tada jie pradeda judėti po vieną. Mes galime pasiekti tą patį kompensuotą efektą, bet sustabdyti nepageidaujamą mūsų animacijos pauzę, paprasčiausiai nustatydami vėlavimą į neigiamą vertę.

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

Kitas puslapis: daugiau CSS animacijos pavyzdžių, kuriuos reikia ištirti

Dabartinis puslapis: CSS animacijos pamokos

Kitas puslapis CSS animacijos efektai