Ultimate Guide to Web Animation

Animaatio on yksi ihmiskunnan elinikäisistä unelmista (jos jotkut historioitsijat uskovat). Teoria alkaa luolamaalauksilla: Joissakin luolamaalauksissa on tavallista nähdä olentoja, jotka on piirretty aivan liian monilla raajoilla.

Tämän takana on muutamia teorioita. Jotkut ehdottavat, että tämä johtui yksinkertaisesti siitä, että taiteilijoilla ei ollut keinoa poistaa raajoja, jättäen virheensä seinille jälkipolville. Toiset uskovat, että nämä olivat aikaisintaan yrityksiä ottaa liikeidea staattisessa kuvassa. Valitsen uskomaan toisen teorian.

Ja mikä on luonnollisempaa kuin halu vetää liike? Kaikki luonteeltaan liikkuu. Ihmiset kävelevät, juoksevat vettä, kasveja avautuvat, ainoa, joka on todella luonteeltaan pysyvä, on muutos liikkeessä. Osa siitä tapahtuu hämärtymällä, ja osa siitä on liian hidasta, mutta se tapahtuu aina.

Animaatio on muutos ja liike. Se on lähinnä sitä, että saamme elämästä taidetta. Tästä syystä ihmiset aina sanovat asioita, kuten "animaatio tekee verkkosivujemme (tai esityksiä tai mitä tahansa) elävää ." Voisi olla liikaa, mutta se on lause, joka tyylikkäästi kaappaa animaation tarkoituksen web-suunnittelussa.

Tämä liike-illuusio, kun sitä käytetään oikein, kertoo käyttäjille, että he ovat itse asiassa tehneet jotain. He ovat onnistuneet vuorovaikutuksessa käyttöliittymän kanssa ja ovat aiheuttaneet jotain muutosta.

Tämä herättää samat tunteet (tai ainakin hyvin samankaltaiset tunteet) niissä, joita he kokevat, kun he ovat vuorovaikutuksessa fyysisten objektien kanssa. Animaatio on tavallaan skeuomorfinen. Se on oikein, sanoin "s" sana.

Kun sitä käytetään oikein, animaatio on suunniteltu jäljittelemään reaalimaailman vuorovaikutuksia. Tavallaan olemme tulleet koko ympyräksi. Emme ehkä enää käytä kovin paljon nahkatuotteita, mutta yritämme edelleen jäljitellä todellista maailmaa.

Animaatio verkossa: lyhyt historia

Ennen kuin pääsemme käytännön asioihin, katsotaanpa, kuinka internetin animaatio tuli nykyiseen (ja erittäin viileään) tilaansa. Siitä lähes kaikki alkoivat gifilla ...

.gif-tiedostot ovat, osoittautuu, vanhemmat kuin minä olen noin kaksi vuotta. Ne otettiin käyttöön vuonna 1987 juuri ajoissa Internetin varhaisiksi päiviksi, kun tiedämme sen (enemmän tai vähemmän). Niinpä alkoi tanssivan vauvan ja muiden kauhujen aikakausi parhaiten unohdettu.

Silti, jos gifien suosio näytti meille mitään, niin ihmiset halusivat tuoda animaation verkkosivuilleen. Huomaa, useimmat eivät luultavasti ole vielä tarkastelleet tapoja, joilla animaatio voisi parantaa käytettävyyttä. Kyse oli siitä, että tuo vähän tyyliä ja vähän elämää, sivun muuten staattiselle alueelle.

Kun gif-tiedostojen ominaisuudet olivat loppuneet, ihmiset halusivat uusia ja parempia tapoja lisätä animaatioita sivustoihinsa. Ja ääni! Oi ihana ääni. Kuinka mahtavaa olisi, jos ihmiset avasivat Web-sivusi ja suosikkikappaleesi soi? Ja kuten todellinen laulu ... mikään MIDI-paska, eikö?

Se oli Flash, joka antoi meille mahdollisuuden oppia oppitunti kovalla tavalla. Älkäämme unohtako, että Flash oli melko hämmästyttävä sen päivälle. Itse asiassa se oli innovaatio. Se oli edistystä. Se oli hienoa .

Riippumatta siitä, kuinka huonosti sitä käytettiin myöhemmin, on tunnustettava, että Flash antoi meille mahdollisuuden tehdä asioita Internetissä, jota emme tienneet aiemmin. Se laajensi luovaa horisonttia, loi työpaikkoja aivan uudelle toimialalle, antoi meille "web-sarjakuvia" ja suurinta mitä tapahtui 90-luvulla (Nirvanan lisäksi): Flash-pelit. Jopa nyt, näet nämä asiat hyvin riippuvuutta.

Ajan myötä monet suunnittelijat siirtyivät JavaScript-pohjaiseen animaatioon pienemmille asioille, kuten pudotusvalikoille ja muille navigointielementeille. Se oli enemmän SEO-ystävällinen, kun kaikki, jos teit sen oikein. Toiset käyttivät vain JavaScript-koodia, koska FrontPage ja DreamWeaver vaihtelivat painikkeita, mutta hidas edistyminen on edelleen edistystä.

Viime vuosikymmenen puolivälissä W3C oli kuitenkin jo työskennellyt animaation sisällyttämiseksi CSS-määritykseen. Vuonna 2009 julkaistiin CSS-animaatiosarjan ensimmäinen julkinen luonnos.

Ja nyt? Nyt etsimme keinoja pakottaa laitteiston renderointi, yhdistää CSS-animaatioita SVG-tiedostoilla, JavaScript-kirjastoja laajentamaan perusanimaatio-toimintoja ja paljon muuta.

Nyt etsimme tapoja tehdä enemmän kuin lisätä tyyliä verkkosivustoille. Nyt yritämme lisätä käytettävyyttä, informoida ja kouluttaa käyttäjiä ja auttaa heitä selvittämään, mitä he tekevät.

Animaatio ei ole enää uutuus web-suunnittelijoille. Elokuvasta tuli pohjaksi kokonaan uudenlaista tarinankerrontaa. Meille se on tulossa tehokkaan vuorovaikutussuunnittelun perustaksi.

Ei ole koskaan ollut parempi aika keskittyä animaatioon suhteessa web-pohjaisiin sovelluksiin ja sovelluksiin. Tekniikka ei ole vielä täysin muodostunut (milloin tahansa?) Tai täysin tuettu (milloin se on ikinä?), Mutta löydämme uusia tapoja toimittaa se ihmisille ilman lisäosia tai omistuskoodia.

Mitä enemmän animaatiomme perustuu avoimiin standardeihin, sitä enemmän ihmiset näkevät sen ensi sijassa. Ja tämän viimeaikaisen keskittymän avulla sen käyttäminen vuorovaikutuksen ohjaamiseen on erittäin, erittäin hyvä asia.

On aika olla varhaisessa vaiheessa.

Verkon animaation tyypit

Ryhdytään hommiin. Millaisia ​​animaatioita me puhumme? Tarkoitan, sanoin paljon animaation käyttämisestä käyttäjien käyttöliittymien parantamiseksi. mutta mitä tämä tarkoittaa?

Se ei tietenkään riitä animaation ansaitsemiseen verkkosivuelementteihimme ja toivoo, että se parantaa tulosprosenttiasi. Se olisi typerää. Kuten kaikki muut piirteet, millaisia ​​animaatioita käytät, ja kun käytät niitä, on harkittava tarkkaan.

Samoin on otettava huomioon toteutuksen tosiasialliset yksityiskohdat. Jos animaatiosi ovat niin voimakkaita, että ne heikentävät käyttäjien mobiililaitteita tai pahempaa niiden työpöytiä, sinulla on ongelma. Tai viisi.

Aloitetaan tarkastelemalla verkossa tyypillisiä animaatiotyyppejä:

Liitäntäelementin animaatio

En tiedä, onko tämä yleisimpi animaation tyyppi, vaikka arvaus on todennäköisesti se. Ja niin pitäisi olla. Tämä on mielestäni hyödyllisin animaatio, jota meillä on käytettävissämme.

Kuten sanoin johdannossa, tämä on animaatio, jonka avulla käyttäjät tietävät, että heidän toimintansa (esimerkiksi klikkaamalla) on rekisteröity. Heidän napsautuksensa oli katalysaattori, jota tarvitaan tekemään jotain tapahtumaan, olipa kyse sitten siirtymisestä toiseen sivuun, sivupalkin tai modaalivälien avaamisesta tai sähköpostin lähettämisestä yhteydenottolomakkeesta.

Tämä palaute ei ole vain mukavaa, se on nyt tärkeä, tässä litteän muotoilun maailmassa. Ihmisten on tiedettävä erot käyttöliittymän ja koristelun välillä. Elementtien animointi yksinkertaisilla ja hienovaraisilla tavoilla vuorovaikutukseen antaa heille tarvitsemansa palautteen.

Se voi olla niin yksinkertainen, että painikkeiden taustat muuttuvat tai ne palautuvat. Tämä luokka kattaa myös animaatiot, jotka tekevät sivupalkit "liukuvat" sivulle ja ne, jotka tekevät modaalisten ikkunoiden täyttävän itsensä.

Odotetaan animaatioita

Ja vielä kerran, se koskee palautteen antamista käyttäjälle. Nämä ovat animaatiot, jotka näytät käyttäjälle, kun taustalla tapahtuu jotain, etkä halua heitä turhautumaan.

Näiden animaatioiden hyödyllisyys osoitettiin jo kauan sitten, kun ensin keksittiin graafisia käyttöliittymiä. Se alkoi siitä, miten hiiren kohdistin muuttuisi tunnin lasiksi, ja etenemispalkit. Apple esitteli "spinning beach ball of death", jossain vaiheessa, ja ikkunat näyttivät tiedostoja lentäen gracefully kansioon toiseen.

Nämä yleissopimukset hyväksyttiin verkossa niin pian kuin mahdollista ja hyvillä syillä. Kun ihmiset alkavat miettiä, mitä tapahtuu, he jatkavat napsauttamista tai napauttamista. Se saattaa olla ilmaisu turhautumista. He uskovat, että se todella tekee asioista nopeammin.

Joka tapauksessa tapa kertoa käyttäjälle, mitä tapahtuu, jopa yksinkertaisen etenemispalkin avulla, voi helpottaa mielessä huomattavasti ... myös niille meistä, jotka ovat käyttäneet tietokoneita pitkään.

Beegit, kirjoitusohjelma, jota käytin kirjoittamaan ja muokata tätä artikkelia, antaa minulle kätevän "edistyksen ympyrän" kertoa minulle, kun kuvat lähetetään, kuten modaalivälin vasemmassa yläkulmassa näkyy:

Tarinoita animaatioita

Nyt animaation tarinatarho ylittää sarjakuvia. Itse asiassa en puhu niistä lainkaan. Pikemminkin jotkut suunnittelevat verkkosivustoja niin, että kun käyttäjä vuorovaikuttaa heidän kanssaan (esimerkiksi: vierittämällä sivua alaspäin), animaatiot laukaistaan, jotka kertovat tarinan.

Joitakin yleisiä esimerkkejä ovat ne sivut, jotka esittelevät uuden tuotteen "kokoamalla" sen silmissäsi. Toiset pelata enemmän kuin sarjakuva, jossa on pieniä merkkejä, jotka seuraavat sinua sivun ja kaiken.

Näiden animaatioiden tehokkuus on ... kiistanalaista. Tyypillisesti niillä ei ole tarkoitus parantaa käytettävyyttä, vaan tehdä vaikutuksen käyttäjäksi ja antaa heille jonkin verran asiayhteyttä sivun aiheeseen. He saattavat yrittää osoittaa tuotteen ammattitaitoa tai jakaa kokemuksia, jotka johtivat yrityksen luomiseen.

Olipa kyse sitten näiden tehtävien toteuttamisesta, ne todennäköisesti riippuvat animaation laadusta itsestään riippumatta siitä, vaikuttavatko ne aiheettomasti sivuston suorituskykyyn ja itse sivun sisältöön. Jos käyttäjä ei löydä sitä, mitä he etsivät verkkosivustollasi, kaikki animaatiot maailmassa eivät voi korjata sitä.

Kaksi esimerkkiä, joista pidän paljon, ovat peräisin tuotemerkkeistä, joilla on paljon kokemusta tällaisesta asiasta: Apple ja Sony.

Mac Pron omistettu sivu näyttää tarkalleen mitä liesituulettimen alle kun vierität alas:

Samaan aikaan Sonyn yli, he esittelevät useita eri laitteita, eivätkä ole niin paljon "koottuja" kuin heidän osansa hajotettu yhdessä palovaikutusten kanssa.

Puhtaasti koristeelliset animaatiot

Parasta tai huonompaa, jotkut anovat animaatiota sivustolleen, joka ei muuta tarkoitusta kuin nähdään. Onko se sen arvoista?

Kyllä ja ei…

Haluan yleensä välttää sen, koska se on häiritsevää. Haluat, että ihmisten silmät herättävät syitä, joiden pitäisi ostaa mitä olet myymässä ja puhelut toimintaan. Haluat heidät saamaan sen, mistä he ovat tulleet. Jos verkkosivustosi ei palvele jotain tarkoitusta käyttäjälle tai jos he ovat liian hämmentyneitä yrittäessään määrittää sen tarkoituksen, he eivät välttämättä tule takaisin.

Koriste-animaatio olisi piilotettava kokonaan. Näytä se sen jälkeen, kun ihmiset ovat suorittaneet toimintapyynnön. Voit myös sisällyttää hienoja animaatioita, jotka käynnistetään vain, kun käyttäjä tekee jotain hyvin spesifistä, kuten hiirellä hiirellä jotain pienessä otsikossa / alatunnistimessa.

Tässä WDD: ssä leijuu logoa animoimatta, vaikka voitiin väittää, että koska logo on linkki, se ei ole pelkästään koristeellinen, mutta se on kuitenkin hyvä esimerkki. Yksinkertainen Google-haku paljastaa, että siellä on useita sivustoja, joissa konami-koodin käyttö tekee jotain tapahtumaan (kuten Godzillan ponnahtamista ja kohinaa ... En ole valehtelemassa).

Muita esimerkkejä ovat Googlen monet tunnetut pääsiäismunia , ja tämä yksi photojojo.com:

Selaa aina sivun alareunaan, ja ystävällinen dinosaurus "ottaa kuvan". Lisäksi sivuilla, joissa on, kuvassa näkyvä ilmapallo heilahtelee hienosäyteisesti sivulta toiselle.

Animaatio mainonnassa, tai: suolini sanoo vain, mutta lompakkoni sanoo kyllä

Mainonta. Joillekin, heidän tulonsa ( yskä yskä ) ja muille vitsauksesta. Lisää animaatio mainoksiin ja puomiin! Silmät vetää sitä vastaan ​​heidän tahtoaan. Se on refleksi.

Lisää ääntä, ja he tuntevat voimakasta vihaa ... myös reflektiota.

Mutta se on lähes väistämätöntä. Jos haluat saada ihmisiä katsomaan mainoksiasi, animointi on hyvä tapa lähteä. Tämä voi tehdä sinusta epätoivottavan joissakin nykyaikaisissa mainontaverkoissa, jotka ylpeilevät "huomaamattomista mainoksista", mutta jos animoituja mainoksia ei toimisi, meillä ei olisi vielä niitä.

Mutta animaatiolla on sama ongelma, jonka aiheuttaa koristeellinen animaatio: se houkuttelee käyttäjän tehtävistään. Verkkokaupan maailmassa hämmennys voi olla kuolema.

Lopulta, sinun on punnittava hyviä ja huonoja puolia. Ei mainoksia, huomaamattomia mainoksia tai animoituja mainoksia, se on kaikki kompromissi.

Saatat huomata, että tässä listassa missään ei mainita splash screen animaatioita. Siksi odotan kaikkien tietävän paremmin.

Animaation toteutus

Toteutuksen tekniset näkökohdat ovat tärkeitä, mutta käytätkö .gif-, video-, CSS-, SVG- tai jopa Flash-versioita (shudder)? Unohda hetkeksi teknologia tai tekniikat, jotka aiot käyttää, ja valmistaudu vain hieman enemmän teoriaan. Käyttäjät kiittävät sinua.

Suorituskyky, suorituskyky ja suorituskyky

Saatat ajatella, "Okei, tämä kuulostaa itsestään selvältä. Animaatioiden pitäisi toimia nopeasti, ei hidasta. "Olet oikeassa, teoriassa on ilmeistä. Ongelmana on silti, että löydän aina uusinta tekniikkaa rakennettuja verkkosivustoja, joissa on kiihkeä animaatio.

Minulla on Nvidia GTX 750 TI -videokortti, joka maksoi noin 200 dollaria. Animaatioiden ei pidä olla epäselviä. Olin joissakin verkkosivustoissa äskettäin, mikä sai minut ajattelemaan, "Skyrim toimii nopeammin kuin tämä." Ja minä en ollut soittanut tai liioitellut.

Nyt kuvitella, millaista olisi navigoida samoilla verkkosivustoilla huonolaatuisella tabletilla tai älypuhelimella. Toisaalta se olisi hieno tapa todella kokeilla jonkun luonnetta, mutta toisaalta se ei saa enää näitä hitaita verkkosivustoja enää liiketoimintaa. Jos vain vaihtoehdot ovat hitaita animaatioita tai ilman animaatiota, sinun on parasta käyttää käyttöliittymää, joka vain istuu.

Tämä tarkoittaa mitään sivustoista, jotka on rakennettu niin paljon animaatiota ja niin monia erikoistehosteita, että ne tarvitsevat latausnäyttöjä, joissa on edistymispalkkeja. Kukaan ei saisi odottaa animaatioita ladata ennen kuin he saavat nähdä haluamansa tai tarvitsevat tiedot. Koskaan. Ihmisten odottaminen on, miten menetät liiketoiminnan.

Let's break kaikki tämä alas kohdepisteitä:

• Jos Skyrim toimii sujuvammin kuin verkkosivustosi työpöydällä, se on huono.
• Jos sivustosi tarvitsee latauspalan ennen kuin käyttäjät pääsevät katsomaan etusivua, se on todella huono.

Ja täällä aion antaa vain vähän teknistä neuvontaa: missä laitteiston kiihdytys ja suorituskyky ovat kyseessä, CSS on melkein aina parempi kuin JavaScript. Aina kun sinulla on valinnanvara, käytä CSS-pohjaista animaatiota ja käytä JS: tä varoina.

Aloita pienillä asioilla

Kun tarkastellaan animaatiota suunnittelutyökaluna eikä tyylillisenä valinnassa, on parasta aloittaa pieni. Yksi, pieni ja huomaamaton animaatio toimii paremmin (ks. Edellä oleva kohta). Toiseksi, iso ja vilkkaan animaation on oltava tarkoituksensa vain "hyvännäköisyyden" olevan hyödyllistä.

Useimmat verkkosivustot eivät tarvitse animaatiota, jota käytettiin käyttämällä UI-elementtejä tuntuu "todelliselta" ja puoliksi luonnolliselta. Ennen kuin aloitat parallaksen heittämisen ympäri kuin riisi häät, kysy itseltäsi, jos se todella parantaa käyttäjien kokemuksia. Ovatko suuret ja näyttävät asiat, jotka liikkuvat näytöllä, ilmoittavat ja ohjaavat käyttäjiä paremmin kuin tavallinen teksti ja kauniit kuvat?

Useimmissa tapauksissa vastaus on luultavasti "ei". Tietenkin on poikkeuksia. Siellä on melkein aina. Suurin osa ajasta saattaa kuitenkin olla parempi vain animoida painikkeet, tehdä piilotettu navigointipalkki liukumaan sisään ja animoida helvetin ulos menestysviestistä, joka näkyy sen jälkeen, kun joku käyttää yhteystietomerkkiäsi.

Kauneus on avain hyvään muotoiluun, mutta silti usein aliarvioitu. Aloita siellä. Ja sitten, jos on selvää, että jotain suurempaa ja vaaleampaa voisi palvella tarkoitustaasi käyttökokemuksen näkökulmasta, mene kaikki ulos!

Pidä kestoa alhaisena tai: tunnen tarvetta ... nopeuden tarve

Animaatioiden pitäisi olla nopeita, tai pikemminkin niiden pitäisi tapahtua nopeasti. En puhu suorituskyvystä tässä, vaan varsinaisena ajankohtana, jota esine liikkuu liikkeellä.

Ajattele kuinka vuorovaikutuksessa todellisiin kohteisiin. Joskus siirrymme nopeammin, joskus hitaammin. Nopeus, jolla meillä on vuorovaikutus kohteen kanssa, voi riippua sen koosta, käsiteltävästä tehtävästä tai siitä, onko se täynnä nestettä, jota emme halua taipua; mutta yleensä me poimimme asioita ja siirrämme ne melko nopeasti. Yksittäisiä liikkeitä voi tapahtua millisekunteina.

"Millisekuntia" on yleensä aika, jolloin haluamme mitata käyttöliittymän animaation. Kauemmin, ja ihmiset alkavat menettää kärsivällisyytensä koneensa, tuotteen tai molempien kanssa. Sinun pitää pitää se lyhyt, tai asiat tuntevat vain hitaasti.

Tämä koskee erityisesti tuotteita, joita ihmisten on käytettävä toistuvasti. Vaikka animaatio onkin erittäin hauska ja viihdyttävä, se menettää valituksensa kymmenennen kerran jonkun nähtäväksi. Se on napahduspainike tai liukuva valikko, ei intro suosikki TV-ohjelmasi. Kukaan ei laula, täällä.

Tee asiat pomppimaan, hetken kuluttua

Fyysiset kohteet pomppivat. Jotkut heistä eivät tee sitä kovin hyvin, mutta pohjimmiltaan kaikki esineet hymyilevät hieman, jos pudotat heidät tarpeeksi kauas kova pintaan ja jos ei ole liiallista ilmavaroitusta ja ... saat pisteen.

Yhteensopivuus UI-elementtien kanssa on kuin vuorovaikutuksessa pienten, kovien kohteiden kanssa. Heität ne toiselle puolelle, ne pomppivat hieman. Pudotat ne, ne pomppivat hieman.

Siksi voi olla hyödyllistä tehdä animaatiot "pomppia", varsinkin jos ne ovat siirtyneet pystysuoraan. Kyse on vain illuusion ylläpitämisestä.

Asiat eivät normaalisti pysähdy dimeillä

Liikkuvat asiat kestävät yleensä vähän aikaa pysähtyä. Kiinteät kiinteät kohteet otetaan käyttöön yleensä vain vähän aikaa nopeuttaa. Yay fysiikka!

Joten, kun asetat esineitä liikkeelle tai pysähdy liikkeelle, muista antaa heille aikaa (millisekunteina) hidastaa tai nopeuttaa. Tätä kutsutaan "helpoksi", ja siinä on toimintoja, jotka on rakennettu suoraan CSS: ään.

Linkit

Yksikään Ultimate Guide -artikkeli ei olisi täydellinen ilman vähintään yhtä osaa, joka oli täynnä linkkejä. Joten tässä mennään. Meillä on linkkejä artikkeleihin, jotka käsittelevät verkkosuunnittelun animaation perustaiteoriaa, oppitunteja aloittaessasi ja runsaasti esimerkkejä. Nauttia.

Web-animaatioteoria

Haluatko lisätietoja ennen kuin aloitat animoitavan kamaa? Ei ongelmaa. Tässä on koko joukko neuvoja hyvin fiksuista ihmisistä ja joitain yleisiä spekulointia animaation tulevaisuudesta Internetissä.

Animaation periaatteet verkossa
Tämä artikkeli yli cssanimation.rocks hahmotellaan perusperiaatteet, jotka animoivat esineitä yleensä. Muista tutustua muihin verkkosivustoihin esimerkkeihin, opetusohjelmiin ja sähköpostikurssiin. (Sähköpostikurssi kuitenkin maksaa rahaa.)

Näkymätön animaatio
Steven Fabre kertoo, miten animaatio, kuten muotoilu itse, olisi periaatteessa näkymätön. Se kuulostaa paradoksaalilta, kunnes olet lukenut sen. Mene niin.

Aikooko animaatio olla vuoden 2015 suuri käyttöliittymä?
Spekulatiivinen pala, jossa on hyvä, jos lyhyt selitys joistakin animaation ohjaavista periaatteista.

Animaation rooli Web-suunnittelussa
Toinen pala yksinkertaisilla, perusohjeilla. Se on lyhyt ja yksinkertainen, mutta ehkä kannattaa lukea uudelleen joka kerta, kun sinun on tehtävä suuri animaatioon liittyvä päätös. Ajattele sitä huijausarkkina näkökulmasta.

Animaatio valtio 2014
Erinomainen katsaus siihen, miten Rachel Nabors tekee tällä hetkellä web-animaation (enemmän tai vähemmän). Näet hänen nimeään täällä muutaman kerran, koska hän on jotain asiantuntijaa aiheesta.

Viisi tapaa animoida vastuuntuntoisesti
Toinen upea artikkeli Rachel Naborsilta (kerroin, että näet enemmän hänen tavaroistaan ​​...). Tässä hänellä on viisi tapaa lisätä animaatio työhösi irrottamatta käyttäjiäsi.

Oppaat

Hanki avainkokoelmasi tänne! Lue lisää CSS-ominaisuuksista kuin koskaan ajatellut mahdollisia / tarpeellisia. Opi eroa helppouden ja helpotuksen välillä - tiedän, että minun piti etsiä sitä.

4 yksinkertaista CSS3-animaatiopäivää
Ohita intro ja pääse suoraan hyviin juttuihin, jos työskentelet näin. Olen sisällyttänyt muutamia johdantokursseja alla. Jos haluat mieluummin suoraan peruskoodiin, aloita täältä.

Aloittelijan esittely CSS-animaatiolle
Aivan mitä sanotaan otsikossa. Niin kauan kuin sinulla on perustiedot HTML- ja CSS-versioista, voit seurata tätä opetusohjelmaa ja saada CSS-pohjaisen animaation tuntemuksen.

Opas CSS-animaatioon: periaatteet ja esimerkit
Smashing Magazine vie lukijoitaan useilla perusanimaatioilla. Se on yksinkertainen, mutta arvokas tieto.

Flashless-animaatio
Toinen loistava esittely CSS-animaatiolle, jonka on kirjoittanut aina fantastinen Rachel Nabors. Kyllä, se on vuodesta 2012, mutta ainoa ero tuolloin ja nyt on, että hän tarjoaa tekniikka tarjoaa enemmän selainta tukea.

Codrops-tutoriaalit
En voi, ja olen vakavasti tarkoittanut tätä, en yksinkertaisesti voi suositella kavereita Codrops tarpeeksi. He ovat tehneet paljon esimerkkejä, käsitteiden todisteita, ideakokoelmia ja kyllä, opetusohjelmia. He rakastavat animaatiota, ja he tekevät paljon jakamaan rakkautta.

Tässä on vain muutamia animaatioon liittyviä tutoriaaleja, jotka he ovat luoneet:

• Kallistetun sisällön diaesitys
• Esikatseluefekti
• Liukuva otsikon asettelu
• Leikkisä Trampoliini Vaikutus
• Miten luodaan (animoituja) tekstin täyttöjä

CSS3-siirtymät, muunnokset, animaatiot, suodattimet ja paljon muuta!
Vuorovaikutteinen, syvällinen opetusohjelma, jossa on runsaasti live-esimerkkejä. Tule tänne, kun olet valmis perusopetukseen. Se antaa sinulle runsaasti ajatuksia harjoitella.

Siirrot ja animaatiot
Opas yksinkertaiseen CSS-animaatioon, jossa keskitytään erityisesti siirtymiin ja siirtymäominaisuuksiin.

Shake Up Web CSS3: n avulla (miten linkit ravistetaan)
Opetusohjelma, jossa painotetaan ravistelemalla juttuja. Tarkoitan, sinun täytyy mennä.

Korkea suorituskykyinen animaatio
Tämä opetusohjelma, jota on paljon rakastettu Paul Lewis ja Paul Irish, keskittyy siihen, miten animoida asioita tavalla, joka ei hidasta selainta. Koska tämä voi olla erityisen tärkeä mobiililaitteilla, kannattaa lukea.

Oppitunti: Animaation täyttötilan käyttäminen CSS-animaatioissa
Kun olet oppinut niin paljon asioiden siirtämisestä, saatat ehkä olla hyvä oppia esineiden käyttäytymisestä, jotka eivät ole vielä muuttaneet tai ovat juuri päättäneet animaationsa. Joskus muotoilu voi olla hankalaa, ja siellä on animaation täyttömoodi .

Keyframe animaation syntaksi
Katkelma, joka on aina hyödyllinen css-tricks.com. Älä muista, miten tehdä näistä avainruudusta asioita, mitä haluat? Lisää tämä kirjanmerkki ja älä huolestu siitä.

Katso sisään: Cubic-Bezier CSS3-siirtymässä
Tämä on kyse ajoituksesta. Tarkoitan animaation kirjaimellista ajoitusta. Tarkemmin sanottuna on kyse Bezier-käyrän käytöstä saadaksesi animaation ajoitus juuri sopivaksi.

Vapauta juttuja!
Löysin kaksi erilaista, fantastista opetusohjelmaa siitä, miten luoda kääntäviä animaatioita. Jokainen tuo toisenlaisen lähestymistavan pöytään, ja jotkut extrat, joita toinen ei. Joten sen sijaan, että vain muodostan mieleni, olen sisällyttänyt ne molemmat.

Luo CSS-flipping-animaatio
CSS-siirtymät, muunnokset ja animaatiot - Flipping Card

Animoituu CSS3-gradienteja
Useimmat animaatioprovideot olettavat, että haluat animoitua objektin geometriaa tai sijaintia sivulla. Tämä opettaa sinut animaamaan mitä siinä on ... tässä tapauksessa kaltevuus.

Esittelykuva, animaatiokuva kautta Shutterstock.

• ← SVG-mallien vienti
• 3 keskeistä oppituntia sivustoille, jotka toimivat →