25 hienoa CSS-animaatioesimerkkiä uudelleen luomiseksi

esimerkki css-animaatiohiirestä
(Kuvan luotto: Donovan Hutchinson)
Sivu 1/2: CSS-animaatio-oppaat

Hyvin käytetty CSS-animaatio on uskomattoman hyödyllinen ja tehokas työkalu. Se voi lisätä kiinnostusta tai luovaa jännitystä, ohjata käyttäjän silmää, selittää jotain nopeasti ja ytimekkäästi ja parantaa käytettävyyttä. Tästä syystä viime vuosina on nähty yhä enemmän animaatioita sivustoissa ja sovelluksissa.

Tässä artikkelissa keräämme joitain tyylikkäimpiä CSS-animaatioesimerkkejä, jotka olemme nähneet, ja näytämme sinulle, miten ne voidaan luoda uudelleen. Lue lisää perusteellisista opetusohjelmista ja inspiroivista vaikutuksista (ja linkeistä niiden koodiin) tutkittavaksi.



Mikä on CSS-animaatio?

CSS-animaatio on menetelmä tiettyjen HTML-elementtien animoimiseksi tarvitsematta käyttää prosessoria ja muistin nälkäistä JavaScriptiä tai Flashia. Muutettavien CSS-ominaisuuksien lukumäärälle tai taajuudelle ei ole rajoituksia. CSS-animaatiot aloitetaan määrittämällä animaation avainkehykset: nämä avainkehykset sisältävät tyylit, joita elementillä on.



Vaikka animaation kohdalla se saattaa tuntua rajalliselta, CSS on todella todella tehokas työkalu ja pystyy tuottamaan kauniisti sileitä 60 kuvaa sekunnissa animaatioita. 'Huolellisten, sujuvien animaatioiden toimittaminen, jotka lisäävät mielekästä syvyyttä sivustollesi, ei tarvitse olla vaikeaa', sanoo etupään verkkokehittäjä Adam Kuhn. 'Nykyaikaiset CSS-ominaisuudet antavat sinulle nyt melkein kaikki tarvittavat työkalut, jotta voit luoda ikimuistoisia kokemuksia käyttäjillesi.'

Parhaiden animaatioiden juuret ovat edelleen Disneyn klassikossa 12 animaation periaatetta - Näet useita mainintoja siitä näissä CSS-animaatioesimerkeissä, joten kannattaa tarkistaa artikkeli ennen aloittamista. Haluat ehkä myös tutustua upeaan yhteenvetoon animoituja musiikkivideoita lisää esimerkkejä ja inspiraatiota.



Kultainen sääntö on, että CSS-animaatioita ei pidä liioitella - jopa pienellä liikkeellä voi olla suuri vaikutus, ja liikaa voi häiritä ja ärsyttää käyttäjiä. Tässä ovat suosikkiesimerkkimme ja kuinka luoda ne uudelleen.

01. Hauska hiiritehoste

Tämä on hauska vaikutus, joka seuraa hiirtäsi ympäri. Se voi olla hyödyllinen, kun haluat kiinnittää huomion sivusi johonkin elementtiin.

Tarvitsemme hyvin vähän HTML-koodia tätä vaikutusta varten:



Ensin sijoitamme esittelyn ja asetamme perspektiivin 3D-muunnoksellemme:

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

Tyylittele sitten div, jonka haluamme animoida:

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

Tässä asetamme taustan, sitten asetamme ylivuoto että piilotettu jotta voimme lisätä a kiilto vaikutus myöhemmin. Asetimme myös css-muuttujat , sheenX ja kiiltävä .

Nämä kiiltomuuttujat auttavat sijoittamaan kiiltoefektin. Käytämme niitä kortissamme jälkeen pseudoelementti:

.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)); }

Täällä varmistamme, että pseudoelementti on suurempi kuin kontti. Tämä antaa meille jotain liukua ympäri kortti- käyttämällä muuttaa .

muuttaa omaisuus käyttää niitä aiemmin asettamiamme CSS-muuttujia. Asetamme ne, joilla on JavaScript. Määritetään JavaScripti ensin kuuntelemaan hiirtapahtumia:

document.onmousemove = handleMouseMove;

Tarvitsemme nyt a kahvaMouseMove toiminto käsitellä 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); }

Toimintomme ottaa ikkunan korkeuden ja leveyden ja luo kulman X- ja Y-akseleille. Sitten asetamme nämä muuttaa tyyli kortti- . Tämä antaa kortille kulman hiiren perusteella!

Seuraavaksi kutsumme funktion pseudoelementin sijainnin asettamiseksi:

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`) }

Pseudoelementtimme näyttää parhaimmalta, kun se liikkuu hiirtä vastakkaiseen suuntaan. Tämän saavuttamiseksi luomme luvun välillä -0,5 - 0,5, joka muuttuu vastakkaiseen suuntaan laskemalla suhde -1: llä.

Kerrotaan tämä luku 800: lla, koska haluamme sen suurentuvan enintään 400px , mikä on kuinka pitkälle asetimme kiilto pseudoelementti kortti- .

Viimeiseksi asetamme nämä siirtymäarvot CSS-muuttujan ominaisuuksiimme, ja selaimen renderöijä tekee loput.

Meillä on nyt kortti, joka kääntyy kohti hiirtämme samalla kun kiiltoefekti liikkuu vastakkaiseen suuntaan ylhäällä. Tämä luo mukavan, huomiota herättävän vaikutuksen.

02. Suuri paljastus

  • Kirjoittaja: Adam Kuhn

Animoidun sisällön paljastavat vaikutukset näyttävät olevan melko suosittuja juuri nyt, ja oikein käytettynä ne saavat käyttäjän keskittymään ja houkuttelemaan yleisöäsi. Olet nähnyt tämän aiemmin: väripaletti kasvaa yhdeltä tai toiselta puolelta vaaka- tai pystysuunnassa ja palaa sitten vastakkaiselle puolelle paljastaen tällä kertaa jonkin tekstin tai kuvan alla. Se on käsite, joka saattaa tuntua hankalalta, mutta perustuu todella muutamaan asiaan.

Ensin määritämme elementtien sijainnin ( lataa koko koodi täältä ) - määritä se suhteelliseksi (vain staattinen epäonnistuu tässä tapauksessa). Tekstitapauksissa on parasta sallia automaattinen korkeus ja leveys, vaikka vähän pehmusteita ei satuta. Määritämme myös muunnoksen alkuperän, jos emoelementtiä haluamme käyttää lähtöasennossa. Koska haluamme elementin piiloutuvan alun perin, käytämme asteikkomuutosta sopivan akselin suuntaisesti sen kutistamiseksi.

Seuraavaksi näennäinen elementti, joka peittää vanhempamme asettamalla muunnoksen alkuperän vastakkaiseen vaihtoehtoon. Merkitse lopuksi animaatiot yhteen käyttämällä joko ajoitustoimintoja tai viiveitä kunkin kompensoimiseksi.

Huomaa, että olemme ylittäneet vanhemman ja pseudoelementin animaatiot viiveellä ja kertoneet tekstimme piilottavan ruudun paljastavan sen vasta sen jälkeen, kun itse elementti on täysin skaalattu näkymään. Katso alla oleva Codepen.

03. Pysäytä

  • Kirjoittaja: Adam Kuhn

Kun olet alkanut kerätä kunnollisen kirjaston erilaisia ​​keventäviä katkelmia, on aika tutkia muita tapoja parantaa animaatioidesi syvyyttä, ja yksi parhaista tavoista on kompensoida animoidut elementit.

paras aika julkaista taidetta deviantartissa

On aivan liian yleistä, että JavaScript-liipaisin on asetettu käynnistämään joukko animaatioita vierityskohdan perusteella vain löytääksesi kaikki kohteet, jotka liikkuvat tehokkaasti rinnakkain. Onneksi CSS tarjoaa itselleen yksinkertaisen ominaisuuden, joka voi tehdä (tai rikkoa) animoitua kokemustasi: animaatio-delay .

Oletetaan esimerkiksi, että meillä on ruudukko kuvia, jotka haluamme animoida kehykseksi, kun käyttäjä vierittää. On olemassa useita tapoja, joilla voimme käynnistää tämän, todennäköisesti lisäämällä luokkia elementteihin, kun ne tulevat näkymään. Tämä voi kuitenkin olla melko raskas selaimen nostaminen, ja se voidaan välttää lisäämällä yksinkertaisesti yksi luokka konttielementtiin ja määrittelemällä lapsielementtien animaatioviiveet.

Tämä on erityisen hyvä käyttötapa esiprosessoreille, kuten SCSS tai LESS, joiden avulla voimme käyttää a @ for silmukka iteroimaan jokaisen elementin läpi.

#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ä näet SCSS: n avulla, että voimme selata niitä jokaisen läpi : tyypin n valitse sitten animaation viive kunkin lapsielementin numeerisen arvon perusteella. Tässä tapauksessa huomaamme, että jaamme ajoituksen, jotta jokainen lisäys pienennetään sekunnin murto-osaan. Vaikka animaatioelementtien tasaaminen voi antaa tunteita animaatiollesi, liian suuri viive voi saada sen tuntemaan olonsa irti. Katso tämä CodePen alla.

esimerkkejä elokuvien erikoistehosteista

04. Squigglevision

  • Kirjoittaja: Adam Kuhn

SVG-suodattimet tarjoavat erinomaisen tavan saavuttaa luonnollinen, käsin piirretty tunnelma ja välttää pelkästään CSS: n tasaisen tuntemuksen renderöinnin rajoitukset. Niiden animointi voi parantaa vaikutusta entisestään.

Tapaus: Squigglevision. Joo, tämä ei ole tekninen termi, jota useimmat animaattorit tuntevat, mutta olet varmasti nähnyt sen käyttävän sarjakuvissa. Ajatuksena on, että näiden animaatioelementtien reunat eivät ole vain jonkin verran rosoisia ja karkeita, mutta nämä karkeat reunat vaihtelevat nopeasti, kehys kerrallaan, jolloin ne tuntuvat ikään kuin ne olisi repäisty luonnossivun sivuilta ja tuotu elämää.

Tämän vaikutuksen saavuttamiseksi voimme sisällyttää sivullemme SVG: n, jossa on useita suodattimia ja pieniä vaihteluja turbulenssitasoissa kullekin. Seuraavaksi määritämme animaation aikajanan kutsumalla kukin suodatin omaan avainkehykseen. On tärkeää leikkiä ajoituksen kestoilla, sillä ennakoimme animaation tuntuvan 'hyppyiseltä', mutta emme halua sen olevan niin hidasta, että tuntisit itsensä erilleen tai niin nopeasti, että tuntuisi hulluksi.

Tätä varten on tärkeää huomata, että CSS: llä ei ole kykyä siirtyä sujuvasti SVG-suodattimien välillä, koska turbulenssin ja mittakaavan kaltaisia ​​ominaisuuksia ei ole mahdollista käyttää, joten tämäntyyppisten animaatioiden pitäisi aina olettaa olevan hajanaista.

05. Tumbling kirjaimet

CSS-animaatio: kaatuvat kirjaimet

  • Kuten nähdään: Vuoden peli
  • Kirjoittaja: Leon ruskea

Googlen vuoden peli sisältää leikkisän CSS-animaation etusivulla, otsikkosanat romahtavat ja törmäävät toisiinsa. Näin se tehtiin.

Ensimmäinen vaihe on määritellä verkkosivun asiakirja HTML: llä. Se koostuu HTML-asiakirjasäilöstä, joka tallentaa pää- ja runko-osan. Vaikka pääosaa käytetään ulkoisten CSS- ja JavaScript-resurssien lataamiseen, runkoa käytetään sivun sisällön tallentamiseen.

Off Kilter Text Animation

The Animated Title

The Animated Title

The Animated Title

Sivun sisältö koostuu kolmesta h1-otsikkotagista, jotka näyttävät animaatioefektin eri muunnelmat. Vaikka näihin tunnisteisiin voidaan lisätä mitä tahansa tekstiä, niiden animaatio määritetään luokan attribuutin nimillä. Näiden luokkien nimien esitys- ja animaatioasetukset määritetään CSS: ssä myöhemmin.

Luo seuraavaksi uusi tiedosto nimeltä code.js '. Haluamme löytää kaikki sivuelementit, joissa on Animoitu luokka ja luoda taulukko luettelo, joka edustaa sisäisen tekstin kutakin sanaa. Alkuperäinen animaation viive määritetään myös tässä vaiheessa. Sivun sisältö ei ole käytettävissä, ennen kuin sivu on ladattu täyteen, joten tämä koodi sijoitetaan ikkunan sisään ladata tapahtuman kuuntelija.



Animaatiokohteiden sanasisältö on sisällytettävä a: n sisälle jänneväli elementti. Tätä varten nykyinen HTML-sisältö palautetaan tyhjäksi ja sitten käytetään silmukkaa, jotta tunnistettujen sanojen luettelossa olevasta sanasta tehdään span-elementti. Lisäksi animationDelay tyyliä käytetään - lasketaan suhteessa alkuperäiseen viiveeseen (määritelty alla) ja sanan hakemiston sijaintiin.



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

Luo uusi tiedosto nimeltä styles.css . Nyt asetamme esityssäännöt, jotka ovat osa jokaista animaation sanaelementtiä, jota ohjataan niiden span-tagilla. Näyttö lohkona yhdistettynä keskitettyyn tekstin tasaukseen johtaa siihen, että jokainen sana näkyy erillisellä rivillä vaakasuorassa linjassa säiliön keskelle. Suhteellista paikannusta käytetään animoimaan sen suhteen tekstivirta asentoon.

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

Animaatioelementeissä, joissa on taaksepäin ja eteenpäin -luokka, on sovellettu tiettyä animaatiota. Tässä vaiheessa määritetään animaatio, jota sovelletaan span elementteihin, joiden emosäiliössä on sekä Animoitu ja taaksepäin tai eteenpäin luokassa.



Huomaa, kuinka Animoitu ja taaksepäin luokan viite, mikä tarkoittaa, että pääelementillä on oltava molemmat.

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

Sekoitusanimaatio määritetään samoilla asetuksilla, joita käytetään eteen- ja taaksepäin-animaatioihin. Sen sijaan, että animaatioita sovellettaisiin vanhempien jokaiseen lapseen, n. lapsi valitsinta käytetään vaihteleviin animaatioasetuksiin. Taaksepäin animaatiota sovelletaan kaikkiin jopa -numero lapsi, kun taas eteenpäin-animaatio on käytössä jokaisessa outo -numero lapsi.

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

Äskettäin luomamme animaatiot tehdään alkukirjaimella ' alkaen 'alkuasento ilman pystysuoraa asentoa tai pyörimissäätöä. '' että 'sijainti on animaation lopputila, joka asettaa elementit säädetyllä pystysuoralla asennolla ja kiertotilalla. Molemmissa animaatioissa käytetään hiukan erilaisia ​​päättymisasetuksia, jotta tekstiä ei voi lukea sekoitettujen animaatioiden päällekkäisyyden vuoksi.



@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. Käännä kirja

  • Kirjoittaja: Adam Kuhn

CSS-animaatiota käytettäessä joskus tarvitaan yksinkertainen lähestymistapa. Ja on olemassa muutamia yksinkertaisempia animaatiomenetelmiä kuin flip-kirja. Käyttämällä askeleet () ajoitustoimintona pystymme toistamaan tämän vaikutuksen. Vaikka tämä saattaa kuulostaa hämärältä ja olla suoraan ristiriidassa tehtävämme ylläpitää juoksevuutta, oikealla tahdistuksella se voi tuntua yhtä saumattomasti orgaaniselta.

Joten miten se toimii? Määritämme animaation keventämistoiminnon vain muutamalla lisäparametrilla - kerromme animaatiollemme kuinka monta vaihetta tarvitaan ja missä vaiheessa haluamme aloittaa ensimmäisen vaiheen (alku, loppu) - näyttää esimerkiksi vähän tältä vaiheet (10, alku) .

Avainkehyksissä voimme nyt määrittää päätepisteen animaatiollemme: tässä esimerkissä oletetaan, että animaatiomme on 10 sekuntia pitkä ja käytämme 10 vaihetta. Tässä tapauksessa jokainen vaihe on yhden sekunnin pituinen ja siirtyy välittömästi seuraavaan sekunnin kehykseen ilman siirtymistä välillä.

Jälleen tämä näyttää lentävän sujuvuuden edessä, mutta tässä porrastetut animaatiot voivat todella loistaa. Voimme iteroida asteittain sprite-arkin läpi ja animoida kehys ruudulta kuten flip-kirja. Määrittelemällä samankokoiset kehykset, mutta kääntämällä ne yhteen vaakasuoraan (tai pystysuoraan) kuvaan, voimme asettaa tämän kuvan elementtitaustaksi ja määrittää pikselin tai prosenttiosuuden taustapaikan animaation loppupisteeksi, jolloin yksi vaihe kullekin runko. Sitten sprite-arkki siirtyy ja täyttää elementin kehys kerrallaan tuoreella taustakuvalla sen sijainnin perusteella.

Katsotaanpa esimerkkiä. Tässä tapauksessa joitain animoituja jalkoja on liitetty joihinkin tekstimerkkeihin. Ensin määritetään animaation nimi, kesto, askelmäärä, lähtöpaikka ja iteraatioluku:

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

Jälleen huomaa, että kesto on suhteellisen nopea alle yhdellä sekunnilla 32 kokonaiskehykselle. Seuraavaksi määritämme avainkehyksemme:

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

Huomaa, että kuvan pystysuuntainen sijoittelu on yhdenmukainen kaikkialla, mikä kertoo meille, että spritit ovat venytetty vaakasuunnassa kuvan yli, joka on kokonaisuudessaan 1280 kuvapistettä. Kun olemme määrittäneet tälle kuvalle 32 kehystä, voimme päätellä, että kunkin kehyksen on oltava 40 kuvapistettä leveä. Katso tämä Codepen alla.

On tärkeää huomata, että suuri sprite-arkki voi mahdollisesti heikentää suorituskykyä, joten muista koota ja pakata kuvat. Hyvin muotoillun sprite-arkin ja sopivan animaation keston ansiosta sinulla on nyt sujuva animaatio, joka pystyy välittämään monimutkaisia ​​liikkeitä.

07. Kuplien puhaltaminen

7UP: ssä oleva CSS-kupla-animaatio on kaunis esimerkki bränditeeman siirtämisestä verkkosivujen suunnitteluun. Animaatio koostuu muutamasta elementistä: kuplien SVG-piirustus ja sitten kaksi animaatiota kuhunkin kuplaan.

Ensimmäinen animaatio muuttaa kuplan peittävyyden ja siirtää sen pystysuunnassa näkymäruudussa; toinen luo heiluttavan vaikutuksen lisättyyn realismiin. Poikkeamia hoidetaan kohdistamalla kuplat ja soveltamalla eri animaation kestoa ja viivettä.

Luomme kuplamme, joita käytämme SVG . SVG: ssä luomme kaksi kerrosta kuplia: yhden suuremmille ja toisen pienemmille kuplille. SVG: n sisällä sijoitamme kaikki kuplat näkymäruudun alaosaan.

... ...

Jotta voisimme soveltaa SVG-tiedostoihimme kahta erillistä animaatiota, molemmat hyödyntävät muunnosominaisuutta, meidän on sovellettava animaatioita erillisiin elementteihin. elementtiä SVG: ssä voidaan käyttää aivan kuten div: ää HTML: ssä; meidän on käärittävä jokainen kuplamme (jotka ovat jo ryhmässä) ryhmätunnisteeseen.

CSS: llä on tehokas animaatiomoottori ja todella yksinkertainen koodi monimutkaisten animaatioiden tuottamiseksi. Aloitamme kuplien siirtämisestä ylöspäin näytöllä ja niiden läpinäkyvyyden muuttamisella, jotta ne hajoavat sisään ja ulos animaation alussa ja lopussa.

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

Heiluttavan vaikutuksen luomiseksi meidän on yksinkertaisesti siirrettävä (tai käännettävä) kuplaa vasemmalle ja oikealle juuri oikealla määrällä - liikaa saa animaation näyttämään liian pirteältä ja irti, kun taas liian vähän menee enimmäkseen huomaamatta. Kokeilu on avain animaation kanssa työskenneltäessä.

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

Animaation soveltamiseksi kupliimme käytämme aiemmin käyttämiämme ryhmiä ja niiden apua n-tyyppinen tunnistaa kukin kuplaryhmä erikseen. Aloitamme soveltamalla läpinäkyvyysarvoa kupliin ja tulee muuttumaan kiinteistön kiihtyvyyden hyödyntämiseksi.

.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 animaatioajat ja viiveet muutamassa sekunnissa toisistaan ​​ja asettaa ne toistamaan loputtomasti. Viimeiseksi käytämme helppous sisään-ulos ajastustoiminto heilutusanimaatioomme, jotta se näyttää hieman luonnollisemmalta.

.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. Vierityshiiri

Hienovarainen vierittävä hiirianimaatio voi antaa käyttäjälle ohjeita, kun hän ensimmäisen kerran laskeutuu verkkosivustolle. Vaikka tämä voidaan saavuttaa HTML-elementtien ja ominaisuuksien avulla, aiomme käyttää SVG: tä, koska se sopii paremmin piirtämiseen.

SVG: n sisällä tarvitsemme suorakulmion, jossa on pyöristetyt kulmat ja ympyrä animoidulle elementille. SVG: n avulla voimme skaalata kuvakkeen haluamaasi kokoon.

Nyt olemme luoneet SVG: n, meidän on sovellettava joitain yksinkertaisia ​​tyylejä, jotta voimme hallita kuvakkeen kokoa ja sijaintia kontissamme. Olemme käärineet 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 animaation. Animaation läpi kulkevalla 0 ja 20 prosentilla haluamme asettaa elementtimme tilan sen alkaessa. Asettamalla sen 20%: iin matkasta, se pysyy paikallaan osan ajasta, kun sitä toistetaan loputtomasti.

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

Meidän on lisättävä opasiteetin aloituspiste ja muutettava sitten sekä Y-asema että pystysuuntainen asteikko 100%: n merkillä, animaation loppu. Viimeinen asia, joka meidän on tehtävä, on pudottaa peittävyys voidaksemme häivyttää ympyrämme.

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

Viimeiseksi sovellamme animaatiota ympyrään yhdessä ‘transform-origin’ -ominaisuuden ja tulee muuttumaan ominaisuus sallii laitteistokiihdytyksen. Animaatio-ominaisuudet ovat melko itsestään selviä. kuutio-bezier ajoitustoimintoa käytetään vetämään ympyrä ensin taaksepäin ennen sen pudottamista hiiren muodon pohjaan; tämä lisää animaatioon leikkisän tunnelman.

.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. Animoitu kirjoitus

CSS-animaatiot: kirjoittaminen

pitäisikö minun mennä taidekouluun tai yliopistoon
Napsauta nähdäksesi animaation toiminnassa

Garden Eight -sivusto käyttää yleistä animaatiotekniikkaa, jossa teksti näyttää olevan kirjoitettu. Saavuttaaksemme vaikutuksen, käännymme SVG: n puoleen. Aluksi luomme SVG: n. Tässä on kaksi lähestymistapaa: muuntaa teksti poluiksi animoidaksesi ne tai käytä SVG-tekstiä. Molemmilla lähestymistavoilla on hyvät ja huonot puolensa.

Aloita luomalla avainkehysanimaatio. Ainoa toiminto, jota tarvitsemme sen suorittamiseksi, on muuttaa aivohalvaus . Nyt olemme luoneet animaation, meidän on sovellettava arvoja, joista haluamme animoida. Me asetimme aivohalvaus-dasharray , joka luo aukkoja aivohalvaukseen. Haluamme asettaa aivohalvauksen riittävän suureksi, jotta se peittää koko elementin, ja lopulta korvataan viiva iskun pituudella.

Taika tapahtuu, kun käytämme animaatiota. Animoimalla offset tuomme viivan näkyviin - luoden piirustusefektin. Haluamme, että elementit piirtävät yksi kerrallaan, ja jonkin elementin piirtämisen lopun ja seuraavan piirroksen välillä on jonkin verran päällekkäisyyttä. Tämän saavuttamiseksi käännymme Sass / SCSS ja n-tyyppinen viivästyttää kutakin kirjainta puolella animaation pituudesta kerrottuna kyseisen kirjaimen sijainnilla.

10. Lentävät linnut

Aloitamme täysin suorilla vektoriviivoilla, piirtämällä animaation kukin kehys, joka kuvaa linnun eri lentotilassa. Sitten manipuloidaan vektoripisteitä ja pyöristetään viivat ja reunat. Lopuksi laitamme jokaisen kehyksen saman kokoiseen laatikkoon ja asetamme ne vierekkäin. Vie tiedosto SVG: nä.

HTML-asetus on todella yksinkertainen. Meidän on vain käärittävä kukin lintu astiaan, jotta voimme käyttää useita animaatioita - yhden saada lintu lentämään ja toisen siirtämään sen näytön yli.

Sovellamme lintumme SVG: tä taustallemme lintujemme ja valitsemme koon, jonka haluamme jokaisen kehyksen olevan. Käytämme leveyttä uuden taustan sijainnin karkeaan laskemiseen. SVG: ssä on 10 solua, joten kerrotaan leveys 10: llä ja muutetaan sitten lukua hieman, kunnes se näyttää oikealta.

.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-animaatiossa on pari temppua, joista et ehkä ole tietoinen. Voimme käyttää animaatio-ajoitus-toiminto näyttää kuvan vaiheittain - aivan kuten muistikirjan sivujen selaaminen animaation viittaamiseksi.

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

Nyt olemme luoneet lentosyklimme, lintumme räpyttää siipiään, mutta ei mene mihinkään. Jotta voimme siirtää hänet ruudulle, luomme toisen avainkehysanimaation. Tämä animaatio liikuttaa lintua ruudun poikki vaakasuunnassa ja muuttaa samalla pystysuoraa asemaa ja mittakaavaa, jotta lintu pystyy mutkittelemaan realistisemmin.

Kun olemme luoneet animaatiomme, meidän on vain 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; }

11. Risti minun hampurilainen

Tätä animaatiota käytetään kaikkialla verkossa, jolloin kolme riviä muuttuu ristikuvaksi. Aivan viime aikoihin asti suurin osa toteutuksista on saavutettu HTML-elementeillä, mutta itse asiassa SVG soveltuu paljon paremmin tällaiseen animaatioon - painikekoodia ei tarvitse enää paisuttaa useilla jaksoilla.

Animoidun luonteen ja SVG: n sekä sen navigoitavan DOM: n ansiosta animaation tai siirtymän suorittamiseen käytettävä koodi muuttuu hyvin vähän - tekniikka on sama.

Aloitamme luomalla neljä elementtiä, olivatpa ne joko div: n sisällä tai polut SVG: n sisällä. Jos käytämme alueita, meidän on käytettävä CSS: ää sijoittamaan ne div: n sisään; jos käytämme SVG: tä, tämä on jo hoidettu. Haluamme sijoittaa viivat 2 ja 3 keskelle - päällekkäin - samalla kun välit viivat 1 ja 4 tasaisesti ylä- ja alapuolelle varmistaen, että muunnoskohde keskitetään.

Aiomme luottaa kahden ominaisuuden siirtämiseen: peittävyys ja kierto. Ensinnäkin haluamme häivyttää linjat 1 ja 4, joihin voimme kohdistaa : n. lapsi valitsin.

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

Ainoa tehtävä on kohdistaa kaksi keskiviivaa ja kiertää niitä 45 astetta vastakkaisiin suuntiin.

.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. jahtaavat ympyrät

Animoitu latauskuvake koostuu neljästä ympyrästä. Ympyröillä ei ole täyttöä, mutta niillä on vuorotellen vedonvärit.

CSS: ssä voimme asettaa joitain perusominaisuuksia kaikille piireillemme ja käyttää sitten : tyypin n valitsinta käyttääksesi toista aivohalvaus-dasharray jokaiselle ympyrälle.

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

Seuraavaksi meidän on luotava avainkehysanimaatio. Animaatiomme on todella yksinkertainen: meidän on vain kierrettävä ympyrää 360 astetta. Sijoittamalla muunnoksemme animaation 50%: n merkkiin, ympyrä kiertyy myös takaisin alkuperäiseen asentoonsa.

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

Luodun animaation avulla meidän on vain sovellettava sitä piireihimme. Asetamme animaation nimen; kesto; iteraatiolaskenta ja ajoitustoiminto. ”Helppo sisään-ulos” antaa animaatiolle leikkisämmän tunteen.

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

Tällä hetkellä meillä on kuormaajamme, mutta kaikki elementit pyörivät yhdessä samanaikaisesti. Korjataksemme tämän käytämme viiveitä. Luomme viiveemme käyttämällä Sass for loop -sovellusta.

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

Viivästysten takia ympyrämme animoi nyt vuorotellen luoden illuusion ympyröitä jahtaavista toisiaan. Ainoa ongelma tässä on, että kun sivu latautuu ensimmäisen kerran, ympyrät ovat staattisia ja sitten ne alkavat liikkua yksi kerrallaan. Voimme saavuttaa saman offset-vaikutuksen, mutta pysäyttää animaation ei-toivottu tauko yksinkertaisesti asettamalla viiveet negatiiviseksi arvoksi.

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

Seuraava sivu: Lisää CSS-animaatioesimerkkejä tutkittavaksi

Tämänhetkinen sivu: CSS-animaatio-oppaat

Seuraava sivu CSS-animaatiotehosteet