12 vinkkiä hämmästyttävään CSS-animaatioon

(Kuvan luotto: Getty)

Tehty hyvin, CSS-animaatio voi puhaltaa elämää sivustoosi ja houkutella käyttäjiäsi ilman ylimääräisiä kirjastoja. Harkittavien, sujuvien animaatioiden toimittaminen, jotka lisäävät mielekästä syvyyttä sivustoosi, ei tarvitse olla vaikeaa - modernit CSS-ominaisuudet antavat sinulle nyt lähes kaikki työkalut, joita tarvitset luoda ikimuistoisia kokemuksia käyttäjillesi.

Tässä artikkelissa käydään läpi joitain vinkkejä interaktiivisen CSS-animaation kaikkien ominaisuuksien vapauttamiseen. Kun olet täällä, saatat myös haluta tarkistaa hämmästyttävän CSS-animaatioesimerkkejä .

Monet näistä vinkeistä viittaavat Disneyn animaatioperiaatteisiin - ja oikeastaan ​​mikä tahansa kunnollinen artikkeli animaatioiden luomisesta olisi väärin jättämättä mainitsematta näitä. Tutustu omistettuun artikkeliin Disneyn 12 animaation perusperiaatetta täydellinen opas. Nämä esiteltiin Frank Thomasin ja Ollie Johnstonin peruskirjassa Elämän illuusio , ja muodostavat erinomaisen lähtökohdan animaatio-aloittelijoille.



01. Pidä kiinni neljästä ydinominaisuudesta

CSS-animaatio tarjoaa suhteellisen yksinkertaisen tavan sujuvasti siirtää suuri joukko ominaisuuksia. Hyvät kiinteät animoidut rajapinnat ovat riippuvaisia ​​sujuvasta, sujuvasta kokemuksesta, ja tätä varten tämä on parasta tuottaa nopeudella 60+ kuvaa sekunnissa. Animaatioaikataulujen suorituskyvyn ylläpitämiseksi haluamme yrittää parhaamme rajoittaa animaatioominaisuudet neljään ytimeen:

  • Asteikko - muunnos: asteikko (2)
  • Sijainti - muunnos: translateX (50rem)
  • Kierto - muunnos: kiertää (180 astetta)
  • Opasiteetti - opasiteetti: 0,5

Animointiominaisuudet, kuten reunan säde, korkeus / leveys tai marginaalit, vaikuttavat selaimen asettelumenetelmiin, ja taustojen, värien tai laatikkovarjojen animaatio vaikuttavat selaimen maalausmenetelmiin ja pudottavat FPS: ää huomattavasti. Näiden ominaisuuksien animointi voi tuottaa mielenkiintoisia vaikutuksia, mutta niitä tulisi käyttää säästeliäästi suorituskyvyn ylläpitämiseksi.

02. Esittele nopeus

Yksi Disneyn animaation perusperiaatteista on squash ja stretch. Vaikka tämä saattaa kuulostaa hieman liian leikkisältä puhtaalle, modernille verkkosivustolle, squash ja stretch ovat periaatteita, jotka juurruttavat havaittua suorituskykyä, ts. Pystymme juurruttamaan sivun suorituskyvyn tunteen, joka ei välttämättä vastaa teknisiä mittareitamme. Puristamalla tai venyttämällä elementtejä liikkeessä annamme heille illuusion suuremmasta (tai pienemmästä) nopeudesta, mikä antaa jälleen tunnetta aidosta juoksevuudesta sivullemme.

03. Oikea ajoitus

CSS-animaatio: CSYes

(Kuvan luotto: Adam Kuhn)

Riippumatta siitä, minkä kirjaston tai pinon valitset hyödyntämään, animaatioidesi ajoitus ja helpottaminen ovat ratkaisevan tärkeitä sujuvan kokemuksen tarjoamiseksi, joka tuntuu käyttäjiltäsi luonnolliselta ja intuitiiviselta. Onneksi meillä on monia erinomaisia ​​vaihtoehtoja, jotka on paistettu suoraan CSS: ään orgaanisen tunnelman tuottamiseksi.

CSS-spec tarjoaa meille melko hienoja natiivimaisia ​​kevennystoimintoja, luonnollisimman olennon helppous sisään-ulos , joka sallii animaation ajoituksen saada irti nopeudesta animaation alkaessa ja päättyessä. Mutta syvempi räätälöinti on mahdollista ja joskus tarpeen - ja lisäksi JS-kirjastot eivät aina ole vastaus.

Tulla sisään kuutio-bezier . Se auttaa ajattelemaan animaation ajoituksen seuraamaan pystysuoraa käyrää, ikään kuin pyörittäisit palloa mäkeä ylös tai alas, huomaten kuinka nopeus muuttuu kullekin muutokselle kaltevuusasteeseen. Käyttämällä kuutio-bezier-toimintoa pystymme kartoittamaan animaatiomme tai siirtymämme näihin käyriin tehokkaasti, jopa sallimalla sekä ennakoinnin - animaation tehokkaat purkamis- tai johdantokehykset - että seurannan, joka on viimeinen kehys animaation.

Saatuamme nämä ominaisuudet voimme antaa animaatiollemme realistisemman fysiikan, kuten joustavuuden. Saat erinomaisen visuaalisen indikaattorin siitä, miten nämä toiminnot saattavat toimia (ja testata ne itse) käymällä erinomaisessa easings.net kirjoittanut Andrey Sitnik. Jos tunnet vektoripiirustuksen käyrät ja kahvat, tunnistat heti miten kuutio-bezier toimii.

Koska CSS-animaation avainkehykset sisältävät yleensä useita segmenttejä, jotka siirtyvät harvoin suoraan 1: stä 100%: iin, on tärkeää, että pidät mielessä, että kaikki muut ajastustoiminnot kuin lineaarinen suoritetaan kunkin segmentin liikekäyrän alusta loppuun.

Esimerkki: animaation avainkehykset vaihtelevat välillä 0% - 25% - 75% - 100%, ja käyttö helppous sisään-ulos ajastustoimintona. Tämä tarkoittaa, että animaatio helpottaa itseään sisään ja ulos kolmesti. Tässä mielessä animaation ajoitustoimintoja voidaan tarvittaessa muuttaa myös avainkehysketjuissa. Yhtä kykenevä kuin kuutio-bezier on, joskus se sopii parhaiten CSS-siirtymiin. Tarkista alla oleva CodePen.

04. Lopeta ja aloita animaatio-toistotila

Käyttämällä animaatio-toistotila ominaisuus, voit helposti käynnistää tai keskeyttää animaatiot. Voit esimerkiksi haluta pysäyttää animaation hiirellä. Voit tehdä tämän käyttämällä animaatio-toistotila: keskeytetty . Tämä vaihtoehto tarjoaa käyttäjillesi suuremman vuorovaikutteisuuden, ja yhdessä pilkulla erotettujen ketjutettujen animaatio-ominaisuuksien tai muutaman lyhyen JavaScript-rivin kanssa voimme määrittää tarkasti, milloin animaation tulisi olla aktiivinen.

05. Ajattele saavutettavuutta

Kun pyrimme parantamaan käyttökokemustamme animaatioilla, emme usein ajattele saavutettavuutta. Kaikki eivät voi nauttia liikkumisesta verkossa. Joillekin käyttäjille - kuten kohtauksille alttiille - se voi aiheuttaa vakavia terveysongelmia.

Onneksi käytettävissä on yhä paremmin tuettu mediakysely: mieluummin vähentynyt liike . Tämä kysely toimii yhdessä käyttäjän käyttöjärjestelmän asetusten kanssa, jolloin voimme rajoittaa animaatioita tarpeen mukaan. Kuvittele esimerkiksi, että käytämme erityisen kiihkeää animaatiota, jota käytetään välittämään kiireellisyyden tunne ja houkuttelemaan käyttäjää kehotus toimintaan . Käyttämällä mieluummin vähentynyt liike voimme pitää tämän elementin staattisena.

@media (prefers-reduced-motion: reduce){ .wildlyFlailing{ animation:none; }}

Muutama tärkeä asia pitää mielessä: jos animoidut elementit käyttävät animaation täyttötilaa, joka määrittelee lopputilan, varmista, että elementit ladataan kyseiseen lopputilaan kohdennettaessa liikeherkille käyttäjille. Jos elementti luottaa animaatioon sen siirtämiseksi näkymäasentoon, haluamme olla varma, että se muuttaa sijaintia kaksikehyksisen porrastetun animaation tai 0s-siirtymän avulla.

06. Ketju animaatiot vaikutusta varten

Yksi CSS-animaation unohdetuimmista ominaisuuksista on mahdollisuus ketjuttaa animaatiot. Eli voimme määritellä kukin animaatio erikseen pilkkuerotuksen avulla, mutta ajaa ne samanaikaisesti.

Esimerkiksi voimme luoda yhden animaation kiertää elementtiämme, toissijaisen animaation skaalata sen taustakokoa ja kolmannen asteen säätääksesi sen peittävyyden himmenemään sisään ja pois. Lisäksi voimme soveltaa näihin animaatioihin muita ominaisuuksia, kuten pilkuilla erotettuja arvoja viiveiden, ajoitustoimintojen, kestojen tai jopa toistotilojen hallitsemiseksi.

Vaikka ketjutetut animaatiot voivat viedä paljon säätämistä kaikkien liikkeessä olevien ominaisuuksien synkronoimiseksi, ne tarjoavat meille myös paljon tarkkaa hallintaa siitä, miten päätämme ajastaa ja helpottaa kutakin animaatiota, luoden monimutkaisen liikkeen paljon vähemmän CSS-viivoja (tai tarvittavat DOM-elementit).

07. Käytä muutosta parantaaksesi suorituskykyä

Yksi erinomainen ominaisuus, joka kuuluu jokaisen CSS-animaattorin työkalupakettiin, on vähän tunnettu, mutta erittäin hyödyllinen tulee muuttumaan . Aikaisemmin oli useita hakkerointimenetelmiä, joita voit käyttää huijaamaan selaimen laitteistoon, joka kiihdyttää animoituja tai siirtyneitä ominaisuuksia - ja jotenkin, sorta toimi. Nyt meillä on kuitenkin oma ominaisuus, jota voimme hyödyntää; ja tulee muuttumaan voi antaa tarvittavan lisäparannuksen animaatioesi suorituskykyyn.

Vaikka parametrille on joitain yleisiä oletusarvoja tulee muuttumaan siellä yleensä haluamme määritellä vain mikä ominaisuus päivitetään mihin elementtiin - kuten muutos: muutos tai, jos ketju on tarpeen, muutos: raja-säde, peittävyys .

Yksinkertaisesti sanottuna tulee muuttumaan omaisuus kertoo selaimellemme, että nämä elementit - yllätys - muuttuvat. Tämän seurauksena näiden elementtien suorituskyky priorisoidaan yleensä ja laitteistokiihdytetään.

Katsotaanpa tulee muuttumaan kaikki asiat! Ei, ei, ei - tämän ominaisuuden liikakäyttö tai kaikkien animoitujen tai siirrettyjen elementtien priorisointi asettaa laitteistolle enemmän kuormitusta kuin se kompensoi. Joten muista, että sitä käytetään säästeliäästi ja vain animaatioihin tai siirtymiin, jotka ovat ratkaisevan tärkeitä rakennettavan kokemuksen kannalta, tulee muuttumaan voi tarjota tarvitsemasi vauhdin.

08. Animoi tyyppi vaihtelevilla kirjasimilla

(Kuvan luotto: Adam Kuhn)

Typografia on aina ollut hankalaa animoida oikein. Toki voimme animoida kirjasimen koon (ominaisuus, jota paremmin käsitellään mittakaavan animoimalla) ja värin, mutta ottamalla käyttöön vaihtelevat fontit , työkalupakissamme on nyt aivan uusi joukko animoitavia vaihtoehtoja.

Aloittamattomille muuttuvat fontit sisältävät useita fontin muunnelmia yhdessä kirjasintiedostossa, mahdolliset painon, kulmien, koristeiden ja muut muutokset. Lisäksi nämä muunnelmat ovat kaikki muokattavissa CSS: ssä font-variation-settings . Tämän avulla pystymme nyt siirtymään sujuvasti normaalista kursivointiin, vaaleasta lihavoituun tai pyyhkäisemään pyyhkäisemättömäksi, kaikki tuntuu morfivalta SVG: ltä, koska monin tavoin juuri täällä tapahtuu.

09. Käytä muuttujia pitämään asiat yhtenäisinä

Erinomainen tapa säilyttää johdonmukaisuus on käyttää CSS-muuttujia tai esiprosessorimuuttujia animaation ajoituksen määrittämiseen.

:root{ timing-base: 1000;}

Perusanimaation tai siirtymän keston asettaminen määrittelemättä yksikköä (sekuntia tai millisekuntia) antaa meille joustavuuden kutsua tätä kestoa laskea () toiminto. Vaikka kesto voi poiketa CSS-perusmuuttujastamme, se on aina yksinkertainen muutos tähän lukuun ja ylläpitää yhtenäistä kokemusta.

10. Pidä asiat luonnollisina kaarella

Palataksemme jälleen Disneyn 12 animaation periaatteeseen, näemme maininnan kaaresta. Kyseinen kaari viittaa luonnostaan ​​pyöreään liikkeeseen, jossa tapahtuu eniten luonnollisia liikkeitä. Hyvin harvoin päivittäisessä elämässä havaitsemme liikettä suoralla linjalla. Ja vaikka on helpompaa ja vaatii vähemmän avainkehyksiä animoida tiukasti vasemmalta oikealle tai ylhäältä alas, voimme tarjota käyttäjillemme helpomman kokemuksen pitämällä tämän kaaren mielessä samalla kun tunnustamme, että jotkut asettelut lopulta estävät meitä animoimalla elementtimme kaarevien polkujen ympärillä (usein aiheuttamalla häiriöitä muihin elementteihin).

11. Toista se

Joskus paras tapa todella tuntea käyttöliittymän animaatioiden luominen on luoda näytön tallennus. Nähdä, miten jokin toimii, on tietysti loistava tapa varmistaa, että animaatiot toimivat haluamallasi tavalla.

Joten miten tämän artikkelin kirjoittaja varmistaa, että hän saa mitä haluaa? CodePen-demojen päätoimittajana hän rakastaa luoda näytön animaatioista GIF-tiedostoja. Näiden GIF-tiedostojen valitseminen ja niiden saaminen silmukkaan palvelee todella toista tarkoitusta. Sen avulla hän voi tarkistaa animaatiot ja diagnosoida kaikki ajoitukseen tai helpottamiseen liittyvät ongelmat.

12. Ajattele hämmästyttävää

Kun työskentelet geometristen tai kuviopohjaisten CSS-animaatioiden kanssa, voi olla hyödyllistä animaatioiden porrastaminen animaation viiveillä. Tästä voi tulla ongelmallista, jos elementti on tullut näkymäikkunaan, mutta pyydämme käyttäjää odottamaan animaation alkamista. Voimme saavuttaa saman tyyppisen animaation siirtymän negatiivisilla viiveillä varmistamalla, että animaation aikajana aloitetaan heti sivun lataamisen yhteydessä ilman käyttäjän odotusaikoja.

Tämä artikkeli ilmestyi alun perin Web Designer -lehdessä. Tutustu kaikkiin verkkosivujen artikkelit täällä .

Luo kaiuttimet x 4

Opi kehittämään parempaa JavaScriptiä GenerateJS: ltä(Kuvan luotto: Tulevaisuus)

Liity joukkoomme huhtikuussa 2020 JavaScript-supertähtien kanssa GenerateJS: ssä - konferenssi, joka auttaa sinua rakentamaan paremman JavaScriptin. Varaa nyt osoitteessa generateconf.com

Lue lisää: