Käytetään hyvin, CSS animaatio on uskomattoman hyödyllinen ja tehokas työkalu. Se voi lisätä kiinnostusta tai jännitystä luova, suoraan käyttäjän silmiin, selittää jotain nopeasti ja ytimekkäästi, ja parantaa käytettävyyttä. Tästä syystä viime vuosina on nähty yhä enemmän animaatioita sivustoilla ja sovelluksessa.

tässä artikkelissa, me pyöristää ylöspäin joitakin hienoimmista CSS animaatio esimerkkejä olemme nähneet, ja näyttää, miten luoda niitä., Lue edelleen erilaisia syvällisiä opetusohjelmia ja inspiroivia vaikutuksia (ja linkkejä niiden koodi) tutkia.

mikä on CSS-animaatio?

CSS animaatio on menetelmä, animointiin tiettyjä HTML-elementtejä ilman käyttää prosessori ja muisti-nälkäinen JavaScript-tai Flash. CSS-ominaisuuksien lukumäärälle tai taajuudelle ei ole rajaa, jota voidaan muuttaa. CSS-animaatiot aloitetaan täsmentämällä animaation avainpiirteitä: nämä näppäinkehykset sisältävät ne tyylit, jotka elementillä tulee olemaan.,

Vaikka se saattaa tuntua rajoitettu, kun se tulee animaatio, CSS on itse asiassa todella tehokas työkalu ja pystyy tuottamaan kauniisti sileä 60fps animaatioita. ”Tuottaa harkittuja, nesteen animaatioita, jotka edistävät mielekästä syvyyttä sivuston ei tarvitse olla vaikeaa”, sanoo front-end web-kehittäjä Adam Kuhn. ”Modern CSS ominaisuudet nyt antaa sinulle lähes kaikki työkalut sinun täytyy luoda ikimuistoisia kokemuksia käyttäjille.,”

paras animaatioita vielä niiden juuret Disney klassikko 12 periaatteet animaatio – näet useita mainintoja, että koko nämä CSS animaatio esimerkkejä, joten se on syytä tarkistaa, että artikkeli ennen kuin aloitat. Saatat myös haluta tutkia meidän ratsia suuri animoituja musiikkivideoita lisää esimerkkejä ja inspiraatiota.

kultainen sääntö on, että CSS animaatioita ei pitäisi olla liioitteleva – pienikin liike voi olla suuri vaikutus, ja liian paljon se voi olla häiritsevää ja ärsyttävää käyttäjille., Tässä ovat meidän suosikki esimerkkejä ja miten luoda niitä.

Hauska hiiri vaikutus

  • Tekijä: Donovan Hutchinson

Tämä on hauska vaikutus, joka seuraa hiirtä. Se voi olla hyödyllistä, kun haluat kiinnittää huomiota elementin sivulla.

tarvitsemme hyvin vähän HTML tätä:

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

Ensinnäkin, meidän asema demo ja aseta näkökulmasta meidän 3D-muunnos:

Sitten tyyli div haluamme animoida:

Täällä me asettaa taustan, sitten asettaa ylivuoto piilossa niin, että voimme lisätä kiilto vaikutus myöhemmin., Asetamme myös css-muuttujat, sheenX ja sheenY.

nämä Sheenin muuttujat auttavat Sheenin vaikutuksen asettamisessa. Käytämme niitä korttimme after pseudo-element:

tässä varmistamme, että pseudo-elementti on suurempi kuin kontti. Tämä antaa meille jotain liukua päälle kortin avulla muunnos.

muunnosominaisuus hyödyntää aiemmin asettamiamme CSS-muuttujia. Asetamme ne JavaScript. Perustetaan JavaScript ensin kuunnella hiiren tapahtumia:

dokumentti.,onmousemove = handleMouseMove;

– nyt tarvitaan handleMouseMove toiminnon käsitellä onmousemove:

– Meidän toiminto vie ikkunan korkeus ja leveys ja luo kulman X-ja Y-akselit. Sitten asetamme nämä muunnostyyliin korttimme. Tämä antaa kortin kulma perustuu hiireen!

seuraavaksi kutsutaan funktiota, jolla asetetaan pseudoelementin asema:

pseudoementtimme näyttää parhaalta, kun se liikkuu vastakkaiseen suuntaan hiirelle. Tämän saavuttamiseksi luomme luvun -0,5 – 0,5, joka muuttuu päinvastaiseen suuntaan laskemalla suhdeluvun -1.,

– Meidän on kerrottava tämä määrä 800 kuin haluamme sen mittakaavassa enintään 400px, joka on, miten pitkälle voimme asettaa kiilto pseudo-elementti ulkopuolella kortin.

lopuksi asetamme nämä offset-arvot CSS-muuttujan ominaisuuksillemme, ja selaimen renderoija tekee loput.

meillä on nyt kortti, joka kääntyy kohdatakseen hiiremme, kun sheen-efekti liikkuu vastakkaiseen suuntaan päällä. Tämä luo mukavan, silmiä hivelevän vaikutuksen.,

paljastaa

  • Tekijä: Adam Kuhn

Animated sisältö paljastaa vaikutukset näyttävät olevan erittäin suosittuja juuri nyt, ja oikein käytettynä ne voivat kaapata käyttäjän keskittyä ja harjoittaa yleisöön. Olet nähnyt tämän ennenkin: lohkon väri kasvaa yhdeltä puolelta tai toisella vaaka-tai pystysuoraan, ja sitten vetäytyy vastustajan puolella, tällä kertaa paljastaa joitakin tekstin tai kuvan alla. Konsepti voi tuntua hankalalta, mutta se nojaa vain muutamaan asiaan.,

ensin perustamme elementtipaikannuksen (lataa koko Koodi tästä) – määrittele se suhteelliseksi (vain staattinen epäonnistuu tässä tapauksessa). Teksti tapauksissa, se on parasta antaa automaattinen korkeus ja leveys, vaikka vähän pehmuste ei satu. Olemme myös määritellä muuttaa alkuperää, jos emoelementin haluamme käyttää alkuasentoon. Koska haluamme elementti piilossa aluksi, käytämme mittakaavassa muuttaa pitkin sopiva akseli kutista se.

seuraavaksi pseudoelementti, joka peittää vanhempamme ja asettaa muunnoksen alkuperän vastapuolelle., Lopuksi string yhteen animaatioita, käyttäen joko ajoitus toimintoja tai viivästyksiä kompensoida kunkin.

Huomautus, Olemme kompensoineet vanhemman ja pseudoelementin animaatiot viiveellä kertomalla tekstimme piilottavan laatikon paljastamaan sen vasta, kun itse elementti on täysin skaalautunut näkyviin. Katso alla oleva Codepen.

Porrastaa siitä,

  • Tekijä: Adam Kuhn

Kun olet alkanut kertyä kunnon kirjaston eri keventäminen katkelmia, se on aika tutkia muita tapoja parantaa syvyys animaatioita, ja yksi parhaista tavoista on offset oman animoituja elementtejä.,

on aivan liian yleistä, että JavaScript-käynnistin asetetaan käynnistämään joukko vieritysasentoon perustuvia animaatioita, vain löytääkseen kaikki kohteet, jotka liikkuvat tehokkaasti rinnakkain. Onneksi CSS itsessään tarjoaa yksinkertainen ominaisuus, joka voi tehdä (tai rikkoa) animoitu kokemus: animaatio-delay.

sanotaan esimerkiksi, että meillä on ruudukko kuvia, jotka haluamme animoida kehykseen käyttäjän kääriessä. Voimme laukaista tämän monin tavoin, – mikä todennäköisesti lisää luokkia elementteihin, kun ne tulevat näköalaportille., Tämä voi olla varsin raskas nostaa selaimen, kuitenkin, ja voidaan välttää vain lisäämällä yhden luokan säiliö-elementti ja määritellä animaatio viivästyksiä lapsi elementtejä.

Tämä on erityisen hyvä käyttää tapauksessa esiprosessorit, kuten SCSS tai VÄHEMMÄN, joka antaa meille mahdollisuuden käyttää @silmukka kerrata läpi jokaisen elementin.

#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; }} }}

Täällä voit nähdä SCSS voimme silmukan läpi kunkin :nth-of-type selector, sitten soveltaa animaatio viive, joka perustuu jokaisen lapsen elementti on numeerinen arvo., Tässä tapauksessa huomaat, että jaamme ajoituksemme pienentääksemme jokaisen lisäyksen sekunnin murto-osaan. Vaikka kuittaaminen animoituja elementtejä voi antaa tunteita animaatio, liian paljon viive voi tehdä siitä tuntuu hajanainen. Katso tätä Koodipenkkiä alta.

Squigglevision

  • Tekijä: Adam Kuhn

SVG-suodattimet tarjoavat hyvä tapa saavuttaa luonnollinen, käsin piirretty tuntuu ja paeta joitakin taulu-tunne rendering rajoitteet CSS yksin. Niiden elävöittäminen voi lisätä vaikutusta entisestään.

asia kohdassa: Squigglevision., Tämä ei ole useimpien animaattorien tuntema tekninen termi, mutta olet varmasti nähnyt sen toimivan sarjakuvissa. Ajatuksena on, että reunat nämä animoituja elementtejä eivät ole vain hieman rosoinen ja karkea veistetty, mutta nämä särmät nopeasti satunnaismuuttujan, kuva kuvalta, mikä tekee niistä tuntuu kuin he ovat revitty sivuja luonnoslehtiö ja tuonut elämään.

Jotta saavuttaa tämä vaikutus, voimme sisällyttää SVG meidän sivulla, jossa on useita suodattimia ja variaatioita turbulenssin tasoa kunkin. Seuraavaksi asetamme animaatiojatkumomme, – kutsuen jokaista suodatinta omaan keskusyksikköönsä., Se on tärkeää pelata ajoitus, kestot, koska oletamme animaatio tuntuu ’hermostunut’, mutta en halua sitä niin hitaasti kuin tuntea hajanaisia tai niin nopeasti kuin tuntea hullu.

tätä varten, se on tärkeää huomata, että CSS puuttuu kyky sujuvasti siirtyminen SVG suodattimet, koska ei ole tapa käyttää ominaisuuksia, kuten turbulenssi ja mittakaavassa, joten nämä tyyppisiä animaatioita pitäisi aina olla tarkoitus nykii.,

Pyllähdys kirjoituksella

  • Kuten näkyy: Vuoden peli
  • Tekijä: Leon ruskea

Google on Vuoden Peli ominaisuuksia, leikkisä CSS-animaatio etusivulla, otsikko sanat pyllähdys ja törmäämättä toisiinsa. Näin se tehtiin.

ensimmäinen askel on määritellä verkkosivun asiakirja HTML: llä. Se koostuu HTML-asiakirjasäiliöstä, joka säilyttää pää-ja koriosan., Vaikka head-osiota käytetään ulkoisten CSS-ja JavaScript-resurssien lataamiseen, kehoa käytetään sivun sisällön tallentamiseen.

sivun sisältö koostuu kolmesta h1 osasto luokka, joka näyttää erilaisia muunnelmia animaatio vaikutus. Vaikka mikä tahansa teksti voidaan lisätä näihin tageihin, niiden animaatio määritellään luokan attribuutin nimillä. Näiden luokkanimien esillepano-ja animaatioasetukset määritellään myöhemmin CSS: ssä.

Seuraava, luo uusi tiedosto nimeltä ’koodi.js’., Haluamme löytää kaikki sivuelementit animate-luokalla ja luoda array-luettelon, joka edustaa jokaista sisäisen tekstin sanaa. Tässä vaiheessa määritellään myös alkuperäinen animaation viive. Sivun sisältöä ei ole saatavilla ennen kuin sivu on ladattu täyteen, joten tämä koodi on sijoitettu ikkunan kuormitustapahtuman kuuntelijan sisään.

animaatioesineiden sanasisältö tulee pitää span-elementin sisällä. Voit tehdä tämän, olemassa oleva HTML-sisältö nollataan tyhjäksi, sitten silmukka käytetään tekemään sana tunnistettu ”sanat” lista span Elementti., Lisäksi käytetään animationDelay-tyyliä-lasketaan suhteessa alkuperäiseen viiveeseen (määritelty alla) ja sanan indeksiasentoon.

Luo uusi tiedosto nimeltä styles.css. Nyt asetamme esittelysäännöt, jotka ovat osa jokaista animaation sanaelementtiä, joita ohjataan niiden span-tunnisteella. Näyttö lohko, yhdistettynä keskittyy tekstin tasaus, johtaa jokainen sana esiintyy erilliselle riville vaakasuunnassa linjassa keskellä sen pakkaus. Suhteellista paikannusta käytetään animointiin suhteessa sen tekstivirtausasentoon.,

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

Animaatio elementtejä, jotka ovat taaksepäin ja eteenpäin-luokan on erityinen animaatio soveltaa niitä. Tämä vaihe määrittelee animaatio soveltaa span-elementtejä, joiden vanhempi säiliö on sekä animoida ja taaksepäin tai eteenpäin luokassa.

Huomaa, kuinka ei ole tilaa välillä animoida ja taaksepäin-luokan viitteen, eli vanhempi elementti on molemmat.

sekanimaatio määritellään samoilla asetuksilla, joita käytetään eteen-ja taaksepäin-animaatioissa., Sen sijaan, että animaatioita sovellettaisiin jokaiseen vanhemman lapseen, Nth-child-valitsinta käytetään vuorotteluanimaatioasetusten soveltamiseen. Takaperin animaatiota sovelletaan jokaiseen parilliseen lapseen, kun taas eteenpäin animaatiota sovelletaan jokaiseen parittomaan lapseen.

animaatiot olemme juuri luoneet tehdään alustava ”alkaen” alkuasentoon, jossa ei ole pystysuorassa asennossa tai kierto säätö. ”To” – asento on animaation lopullinen tila, jossa elementit asetetaan säädetyllä pystyasennolla ja pyörimistilalla., Molemmissa animaatioissa käytetään hieman erilaisia loppuasetuksia, jotta teksti ei pääse lukukelvottomaksi miksattujen animaatioiden päällekkäisyyden vuoksi.

Flip book

  • Tekijä: Adam Kuhn

Kun animointiin CSS joskus kuollut yksinkertainen lähestymistapa on tarpeen. Eikä flip-kirjaa yksinkertaisempia animaatiomenetelmiä juuri ole. Käyttämällä vaiheita () ajoitustoimintonamme pystymme toistamaan tämän vaikutuksen. Vaikka tämä saattaa kuulostaa choppy ja suoraan ristiriidassa tehtävämme ylläpitää sujuvuutta, oikealla pacing se voi tuntua yhtä saumattomasti orgaaninen.

Joten miten se toimii?, Me määrittää meidän animaatio helpotusta toiminto vain muutamia lisäparametreja – kertoo meidän animaatio, kuinka monta askelta tarvitaan ja missä vaiheessa ensimmäinen askel haluaisimme aloittaa (start, end) – näyttää vähän kuin tämä, esimerkiksi vaiheet (10, alku).

Sisällä meidän avainruutuja, me voidaan nyt nimetä päätepiste meidän animaatio: tässä esimerkissä oletetaan, että meidän animaatio on 10 sekuntia pitkä ja käytämme 10 askelta. Tällöin jokainen vaihe on sekunnin pituinen, siirtyy välittömästi seuraavaan sekunnin kehykseen ilman siirtymää.,

taas tämä tuntuu lentävän sujuvuuden edessä, mutta tässä vaiheessa askel-animaatiot voivat todella loistaa. Voimme vähitellen iteroida sprite-arkin läpi ja animoida frame-by-frame aivan kuin flip book. Määrittelemällä kehykset samankokoisia, mutta kootaan ne yhdelle vaaka – (tai pysty) kuva, voimme asettaa tämän kuvan elementti tausta ja määritä pikselin tai prosentteina tausta-asema päätepiste meidän animaatio, jolloin yksi vaihe jokaisen kehyksen., Tämän jälkeen sprite-arkki siirtää ja kansoittaa elementtikehyksen kehyksittäin tuoreella taustakuvalla sijaintinsa perusteella.

katsotaan esimerkkiä. Tässä tapauksessa jotkut sarjat animoituja Jalat liitteenä joitakin tekstihahmoja. Ensinnäkin, me määrittää meidän animaatio nimi, kesto, askelmäärän, start-asentoon ja iteraation laskea: 

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

huomaa Taas, että kesto on suhteellisen nopeaa, alle yhden sekunnin 32 yhteensä kehyksiä., Seuraavaksi meidän täytyy määritellä meidän avainruutuja: 

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

Huomaa, että pystysuora asemointi kuva on johdonmukainen koko, joka kertoo meille, että spritet ovat vaakasuunnassa venytetty koko kuvan, joka on 1280px yhteensä leveys. Kuten olemme määritelleet 32 kuvaa varten, voimme päätellä, että jokaisen kehyksen pitäisi olla 40px leveä. Katso tätä Koodipenkkiä alta.

on tärkeää huomata, että suuri sprite arkki voi mahdollisesti olla vakava vetää suorituskykyyn, joten olla varma, kokoa ja pakata kuvia., Hyvin muotoiltu sprite sheet ja sopiva animaatio kesto sinulla on nyt sileä animaatio voi välittää monimutkaisia liikkeitä.

Puhaltaa kuplia

  • nähty: 7UP
  • View code
  • Tekijä: Steven Roberts

CSS-kupla animaatio ominaisuuksia 7UP on kaunis esimerkki kuljettaa merkki-teeman kautta osaksi sivuston suunnittelu. Animaatio koostuu muutamasta elementistä: kuplien SVG ’piirustuksesta’ ja sen jälkeen kahdesta kuhunkin kuplaan sovellettavasta animaatiosta.,

ensimmäinen animaatio muuttaa peittävyyttä kupla ja se liikkuu pystysuunnassa katsella laatikko; toinen luo välkkyvä vaikutus lisätty realismia. Kompensaatiot käsitellään kohdistamalla jokainen kupla ja soveltamalla eri animaation kesto ja viive.

kupliemme luomiseksi käytämme SVG: tä. Meidän SVG luomme kaksi kerrosta kuplia: yksi suurempia kuplia ja yksi pienempi kuplia. Sisällä SVG meidän kanta kaikki kuplat alareunassa näytä-ruutuun.,

voidakseen soveltaa kaksi erillistä animaatioita meidän SVGs, sekä hyödyntäen muuttaa omaisuutta, meidän täytyy soveltaa animaatioita eri elementtejä. <g> elementti SVG voidaan käyttää paljon kuin div HTML; meidän täytyy kääriä jokaisen meidän kuplia (joka on jo ryhmässä) ryhmä tag.

<g> <g transform="translate(10 940)"> <circle cx="35" cy="35" r="35"/> </g></g>

CSS on tehokas animaatio moottori ja todella yksinkertainen koodi, jotta voidaan tuottaa monimutkaisia animaatioita., Siirrämme ensin kuplat ylös näytölle ja muutamme niiden läpinäkymättömyyttä, jotta ne haalistuvat animaation alussa ja lopussa.

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

jotta voidaan luoda välkkyvä vaikutus, meidän täytyy vain siirtää (tai kääntää) kupla vasemmalle ja oikealle, vain oikea määrä – liian paljon aiheuttaa animaatio näyttää liian jaunting ja katkeaa, kun taas liian vähän menee enimmäkseen huomaamatta. Kokeilut ovat avainasemassa animaation parissa työskennellessä.,

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

voidakseen soveltaa animaatio meidän kuplia, käytämme ryhmien käytimme aiemmin ja apua nnen-of-tyyppi tunnistaa kunkin kupla ryhmä erikseen. Aloitamme soveltamalla läpinäkymättömyysarvoa kuplia ja will-change ominaisuus hyödyntää laitteiston kiihtyvyys.

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

– haluamme pitää kaikki animaatio kertaa ja viivästyksiä muutaman sekunnin toisiinsa ja asettaa ne toistaa loputtomiin. Lopuksi, sovellamme easy-in-out ajoitus toiminto meidän wobble animaatio tehdä se näyttää hieman luonnollisempi.,

Vieritys hiiri

  • nähty: Itämeren Koulutus
  • View code
  • Tekijä: Steven Roberts

hienovarainen vieritys hiiri animaatio voi antaa suuntaa käyttäjälle, kun he ensin maa-sivusto. Vaikka tämä voidaan tehdä käyttämällä HTML-elementtejä ja ominaisuuksia, aiomme käyttää SVG, koska tämä sopii paremmin piirustus.

Sisällä meidän SVG tarvitsemme suorakulmio, pyöristetyt kulmat ja ympyrä elementti olemme menossa animoida, käyttämällä SVG voimme skaalata kuvaketta minkä kokoisia tahansa tarvitsemme.,

– Nyt olemme luoneet meidän SVG, meidän täytyy soveltaa joitakin yksinkertaisia tyylejä, jotta ne voivat valvoa koko ja sijainti kuvaketta sisäpuolella kontti. Olemme kietoneet linkin hiiren SVG: n ympärille ja asettaneet sen näytön alareunaan.

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

Seuraavaksi luomme meidän animaatio. 0-ja 20-prosenttisesti animaatiomme kautta haluamme asettaa elementtimme tilan sen alkaessa. Asettamalla sen 20 prosenttiin läpimenosta se pysyy paikallaan osan ajasta, kun se toistuu äärettömästi.,

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

– Meidän täytyy lisätä peittävyyttä alkaa kohta ja sitten muuttaa sekä Y-aseman ja pystyakselin asteikko 100% rajan, lopussa meidän animaatio. Viimeinen asia, mitä meidän täytyy tehdä, on pudottaa opasiteetti, jotta voimme häivyttää piirimme.

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

Lopuksi me levitä animaatio, ympyrä, sekä muunnos-alkuperä’ omaisuutta ja ei-omaisuuden muutos mahdollistaa laitteiston kiihdytys. Animaatioominaisuudet ovat melko itsestään selvät., Kuutio-bezier-ajoitus-toimintoa käytetään ensimmäisen vedä ympyrä takaisin ennen pudottamalla se alas meidän hiiri muoto; tämä lisää leikkisä tuntuu animaatio.,

Animoitu kirjallisesti

Klikkaa nähdäksesi animaation toiminnassa
  • nähty: Puutarha Kahdeksan
  • Näytä koodi polkuja ja teksti
  • Tekijä: Steven Roberts

Puutarha Kahdeksan sivusto käyttää yhteistä animaatio tekniikka, jolla teksti on kirjoitettu. Vaikutuksen saavuttamiseksi käännymme SVG: n puoleen. Aluksi luomme SVG: n., Tässä on kaksi lähestymistapaa: muuntaa tekstin polkuja animoida niitä tai käyttää SVG tekstiä. Molemmilla lähestymistavoilla on hyvät ja huonot puolensa.

aloita luomalla keyframe-animaatiomme. Ainoa toiminto, jota tarvitsemme, on muuttaa aivohalvaus-dashoffset. Nyt olemme luoneet animaatiomme, meidän on sovellettava arvoja, joista haluamme animoida. Asetamme aivohalvaus-dasharray, joka luo aukkoja aivohalvaus. Haluamme asettaa meidän aivohalvaus olla riittävän suuri arvo kattaa koko elementti, lopulta korvata viiva, jonka pituus aivohalvaus.,

taika tapahtuu, kun sovellamme animaatiota. Animoimalla offsetia tuomme aivoinfarktin näkyville-luoden piirrosefektin. Haluamme, että elementit piirretään yksi kerrallaan, ja jonkin verran päällekkäisyyttä piirtämisen loppuun yksi elementti ja alkaa piirtää seuraava. Tämän saavuttamiseksi me käännymme Sass/SCSS ja n: nnen-of-tyyppi viive kunkin kirjeen puoli pituus animaatio, kerrotaan kanta, että erityisesti kirjeen.,

Flying birds

  • nähty: Fournier Père et Fils
  • Näytä koodi yksittäinen lintu tai koko parvi
  • Tekijä: Steven Roberts

aloitamme täysin suorat linjat vektori, piirustus kukin kehys meidän animaatio, joka kuvaa lintu eri lentotilan. Sitten manipuloimme vektoripisteitä ja kierrämme viivat ja reunat. Lopuksi laitamme jokaisen rungon yhtä kokoiseen laatikkoon ja asetamme ne vierekkäin. Vie tiedosto SVG: nä.

HTML-asetelma on todella yksinkertainen., Meidän täytyy vain kääriä jokainen lintu astiaan, jotta voimme soveltaa useita animaatioita-yksi saada linnun lentämään ja toinen siirtää sen näytön yli.

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

käytämme meidän lintu SVG taustana meidän lintu div ja valitse koko, me haluamme jokaisen kehyksen. Käytämme leveyttä karkeasti laskemaan uutta taustapaikkaa. SVG on 10 solua, niin me kerrotaan meidän leveys 10 ja sitten muuttaa määrää hieman, kunnes se näyttää oikein.

CSS-animaatiossa on pari temppua, joista et välttämättä ole tietoinen., Voimme käyttää animaatio-ajoitus-toiminto näyttää kuvan vaiheet – paljon kuin selailla sivuja muistikirjan viittaavat animaatio.

nyt olemme luoneet lentosyklin, lintumme räpyttelee parhaillaan siipiään, mutta ei ole menossa minnekään. Siirtääksemme hänet ruudun toiselle puolelle luomme toisen keyframe-animaation. Tämä animaatio siirtyy lintu ruudun poikki vaakasuunnassa, kun myös muuttaa pystyasento ja mittakaavassa, jotta lintu mutkitella ympäri realistisemmin.

kun olemme luoneet animaatiomme, meidän on yksinkertaisesti sovellettava niitä., Voimme luoda useita kopioita linnustamme ja soveltaa erilaisia animaatioaikoja ja viiveitä. 

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

Cross my hamburger

  • nähty: Parempi Brändi Virasto
  • Näytä koodi jännevälit ja SVG
  • Tekijä: Steven Roberts

Tämä animaatio on käyttää koko web, turning kolme riviä osaksi rajat tai sulje-kuvaketta., Asti melko äskettäin, suurin osa toteutuksia on saavutettu käyttämällä HTML-elementtejä, mutta itse asiassa SVG on paljon paremmin tällainen animaatio – ei ole enää tarvetta paisunut painikkeet koodi useita jännevälit.

Koska animatable luonto ja SVG ja sen purjehduskelpoinen DOM, koodi suorittaa animaatio tai siirtyminen muuttuu hyvin vähän – tekniikka on sama.

aloitamme luomalla neljä elementtiä, oli se sitten diivin sisällä tai SVG: n sisällä olevia polkuja., Jos käytämme jännevälit, meidän täytyy käyttää CSS-asentoon ne sisällä div; jos käytämme SVG, tämä on jo hoidettu. Haluamme kantaa linjat 2 ja 3 keskustassa – yksi toisensa jälkeen – kun taas väli linjat 1 ja 4 tasaisesti ylä-ja alapuolella, varmista keskitä muuttaa alkuperää.

luotamme kahden ominaisuuden muuttumiseen: opasiteettiin ja kiertoon. Ensinnäkin, haluamme häivyttää linjat 1 ja 4, jotka voimme kohdistaa käyttää :nth-child selector.,

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

ainoa asia jäljellä, voit tehdä, on kohde kaksi keskimmäistä riviä ja kiertää niitä 45 astetta vastakkaisiin suuntiin.

Jahtaa ympyröitä,

  • nähty: Parempi Brändi Virasto
  • View code
  • Tekijä: Steven Roberts

animated lastaus kuvake koostuu neljästä piireissä. Piireissä ei täytä, mutta ovat vuorotellen aivohalvaus-värit.

CSS :ssämme voimme asettaa joitakin perusominaisuuksia kaikkiin ympyröihimme ja sitten käyttää: nth-of-type-valitsinta soveltamaan eri aivohalvaus-dasharray jokaiseen ympyrään.,

seuraavaksi on luotava keyframe-animaatio. Animaatiomme on todella yksinkertainen: meidän tarvitsee vain kiertää ympyrää 360 astetta. Asettamalla meidän muutos 50% merkki animaatio, ympyrä myös kiertää takaisin alkuperäiseen asentoonsa.

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

– meidän animaatio on luotu, nyt vain täytyy soveltaa sitä meidän piireissä. Asetamme animaation nimen; kesto; iteraatioluku ja ajoitustoiminto. ”Helppous” antaa animaatiolle leikkisämmän tuntuman.,

tällä hetkellä meillä on kuormain, mutta kaikki elementit pyörivät samaan aikaan yhdessä. Korjataksemme tämän, käytämme viivästyksiä. Luomme viiveet käyttämällä Sass for Loopia.

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

Koska viivästyksiä, meidän ympyrä nyt elävöittää puolestaan luo illuusion ympyrät jahtaavat toisiaan. Ainoa ongelma tässä on, että kun sivu ensin lataa, ympyrät ovat staattisia, niin ne alkavat liikkua, yksi kerrallaan. Voimme saavuttaa saman offset-vaikutuksen, mutta pysäyttää ei-toivotun tauon animaatiossamme yksinkertaisesti asettamalla viivästykset negatiiviseen arvoon.,

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

Next page: More CSS animation examples to explore