Animate css käyttö. Objektien sujuva animointi vain CSS:n avulla (5 esimerkkiä)

Ennen CSS3:n tuloa sana "animaatio" sai taittosuunnittelijat kylmään hikeen. Ja kaikki, koska noina aikoina tehdä korkealaatuisia ja kaunis animaatio ei ollut vähäpätöinen tehtävä. CSS ei voinut tehdä tätä, joten kaikki animaatiot tehtiin JavaScriptillä. Oli tarpeen selata joukko foorumeita, löytää samat toverit onnettomuudesta, viettää paljon aikaa kehittämiseen ja lopulta kuulla suunnittelijalta: "Okei, tämä käy." Ja kun CSS3 vihdoin ilmestyi, ilotulitus loppui vasta aamulla, ja samppanja virtasi kuin joki. Tämä oli merkittävä päivä kaikille verkkokehittäjille (seuraava sellainen päivä oli, kun Microsoft ilmoitti päättyneensä Internet-tuki Tutkimusmatkailija). CSS3:n myötä monista aiemmin monimutkaisista tehtävistä on tullut yksinkertaisia ​​ja miellyttävää työskennellä. Sama koskee CSS-animaatioita, joista puhun tässä artikkelissa.

CSS-siirtymät

CSS-siirtymien avulla voit tehdä muutoksia CSS-ominaisuuksiin sujuvasti ja ajan kuluessa. Tällä tavalla saat mahdollisuuden hallita elementin siirtymisprosessia tilasta toiseen. Aloitetaan yksinkertaisimmasta esimerkistä ja siirrytään eteenpäin.

Kun siirrät osoittimen neliön päälle, taustaväri muuttuu tasaisesti.

Katsotaanpa nyt lähemmin siirtymien hallintaa CSS:ssä. Meillä on vain 5 ominaisuutta, joiden avulla voimme hallita siirtymäanimaatiota:

• siirtymä-omaisuus;
• siirtymäaika;
• siirtymä-ajoitus-toiminto;
• siirtymäviive;
• siirtyminen;

siirtymäominaisuus - määrittää luettelon ominaisuuksista, jotka animoidaan; ominaisuuksia, joita ei ole määritetty tässä, muutetaan tavalliseen tapaan. Voit animoida kaikki kohteet tietty elementti, joka määrittää arvon all. Jos et määritä mitään ominaisuuksia, oletusarvo on kaikki.

Siirtymäominaisuus: leveys;

siirtymäkesto - määrittää animaation keston, joka voidaan määrittää sekunteina tai millisekunteina.

Siirtymäkesto: 1 s;

Transitio-timing-function - ajoitustoiminto, osoittaa kiihtyvyys- ja hidastuspisteet tietty ajanjakso aika hallita animaation nopeuden muutoksia. Yksinkertaisesti sanottuna voit käyttää tätä ominaisuutta määrittämään animaation käyttäytymistä. Voimme esimerkiksi nopeuttaa animaatiota alussa ja hidastaa sitä lopussa tai päinvastoin. Bezier-käyriä käytetään määrittelemään animaatioprosessi. Yleisesti ottaen siirtymäajoitustoiminnon avulla voit luoda paljon erilaisia ​​käyttäytymismalleja animaatioille, tämä on koko artikkelin aihe, joten emme mene tässä syvemmälle.

Siirtymäajoitusfunktio: cubic-bezier(0, 0, 1, 1);

siirtymisviive - asettaa viiveen ennen animaation alkamista, voidaan määrittää sekunteina tai millisekunteina.

Siirtymäviive: 500 ms;

siirtymä on yleinen omaisuus, jonka avulla voit listata neljä ensimmäistä ominaisuutta järjestyksessä: ominaisuus, kesto, ajoitusfunktio, viive.

Siirtymä: taustaväri 1s cubic-bezier(0, 0, 1, 1) 500 ms;

Tämän saimme yksinkertainen animaatio: kun siirrät hiiren neliön päälle, leveys muuttuu; animaation kesto on yksi sekunti; animaatio toistetaan lineaarinen funktio; viive ennen animaation alkamista 500 millisekuntia.

KANSSA käyttämällä CSS:ää siirtymät voivat animoida lähes kaikkia ominaisuuksia ja luoda monia mielenkiintoisia, kauniita, toimivia ja jopa monimutkaisia ​​animaatioita, jotka täydentävät ja parantavat projektiasi. Tein esimerkiksi tämän Material-FABin puhdas CSS käyttämällä siirtymiä:

CSS-animaatioita

CSS-animaatioiden avulla voit tehdä enemmän monimutkaisia ​​animaatioita, eikä CSS-siirtymiä. Koko salaisuus on @keyframesissa. @keyframes-säännön avulla voit luoda animaation käyttämällä avainkehysten joukkoa, eli se kuvaa objektin tilaa tietyllä hetkellä. Katsotaanpa yksinkertaista esimerkkiä.

Ympyrämme on herännyt eloon ja se näyttää sykkivän.

On 9 ominaisuutta, joiden avulla voit hallita CSS-animaatioita:

• animaation nimi;
• animaatio-kesto;
• animaatio-ajoitus-toiminto;
• animaatio-viive;
• animaatio-iteraatio-laskenta;
• animaatio-ohjaus;
• animaatio-play-tilassa;
• animaatio-täyttö-tila;
• animaatio;

animaation-nimi - Tämä on animaation nimi, joka yhdistää @keyframes-säännön valitsimeen.

Animaatio-nimi: oma-animaatio; @keyframes my-animation ( 0 % ( peittävyys: 0; ) 100 % ( peittävyys: 1; ) )

animation-itration-count - määrittää animaation toistokertojen määrän, oletusarvo on 1. Arvo ääretön tarkoittaa, että animaatiota toistetaan loputtomasti.

Animaatioiden iteraatioiden määrä: 2;

animation-direction - määrittää animaation suunnan.

Animaatio-suunta: käänteinen;

animation-play-state - tämä omaisuus ohjaa animaation pysäyttämistä ja toistoa. On kaksi arvoa, käynnissä (animaatio toistetaan oletusarvoisesti) ja keskeytetty (pysäyttää animaation).

Animaation toistotila: keskeytetty;

animation-fill-mode - määrittää, mitä CSS-ominaisuuksia käytetään objektiin ennen animaatiota tai sen jälkeen. Voi ottaa seuraavat arvot:

• ei mitään - animoituja CSS-ominaisuuksia sovelletaan objektiin vain animaation toiston aikana, ja valmistuttuaan objekti palaa alkuperäiseen tilaansa;
• eteenpäin - animoituja CSS-ominaisuuksia sovelletaan objektiin, kun animaation toisto on päättynyt;
• taaksepäin - animoituja CSS-ominaisuuksia sovelletaan objektiin ennen kuin animaatio alkaa toistaa;
• molemmat - animoituja CSS-ominaisuuksia sovelletaan objektiin sekä ennen animaation päättymistä että sen jälkeen;

Animaatio-täyttötila: taaksepäin;

Ominaisuudet animation-duration , animation-timing-function , animation-delay toimivat samalla tavalla kuin vastaavat ominaisuudet CSS-siirtymissä, joista kirjoitin aiemmin, joten en toista niitä.

Animaatioilla CSS voit luoda melko monimutkaisia ​​animaatioita ilman JavaScriptin avulla. Silmiinpistävä esimerkki ovat loaders, eli elementit, jotka osoittavat, että jotain latautuu sivullesi. Tässä on joitain esimerkkejä:

Motion Path -moduuli

Motion Path Module CSS mahdollistaa objektien liikkeen luomisen polkua pitkin erityisen motion-path-ominaisuuden kautta. Aikaisemmin tällaista animaatiota voitiin tehdä vain käyttäen SVG:tä tai monimutkaisia ​​skriptejä.

Tällä spesifikaatiolla on 3 ominaisuutta:

• liike-polku;
• liike-offset;
• liike-kierto;

motion-path - tämän ominaisuuden avulla voit määrittää pisteet (koordinaatit), joita pitkin objekti liikkuu. Syntaksi on sama kuin SVG-polun attribuutti.

Liikerata: polku("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

motion-offset - tämä ominaisuus saa kohteen siirtymään aloituspisteestä lopetuspisteeseen. Se hyväksyy joko kaksinkertaisen pituuden tai prosentin. Jotta objekti voi alkaa liikkua, sinun on määritettävä animaatio, joka vaihtelee välillä 0 - 100%.

@keyframes airplane-fly ( 0 % ( liikkeen siirtymä: 0; ) 100 % ( liikkeen siirtymä: 100 %; ) )

motion-rotation - tämän ominaisuuden avulla voit määrittää, kummalla puolella eteenpäin kohde liikkuu. Voit määrittää automaattisen, käänteisen tai oman arvosi asteina ("-45deg", "30deg" jne.).

Liike-kierto: auto;

Valitettavasti motion-path on tällä hetkellä tuettu vain Chromessa ja Operassa, mutta toivottavasti muut selaimet seuraavat pian heidän esimerkkiään, koska asia on todella hyödyllinen.

Niille, jotka eivät ole vielä ymmärtäneet, miten tämä toimii, tai haluavat ymmärtää sen paremmin, tein esimerkin (linkki codeopeniin).

Tämä kokoelma sisältää parhaat ja laadukkaimmat CSS-ominaisuudet. Täältä löydät erilaisia ​​ja hämmästyttäviä esimerkkejä ja tekniikoita kuuluisilta taittosuunnittelijoilta ja suunnittelijoilta, jotka yrittävät todistaa, että nyt on mahdollista tehdä melkein kaikki pelkällä CSS:llä. Täältä löydät myös useita oppitunteja, joissa kerrotaan yksityiskohtaisesti, kuinka tällainen luomus tehdään. Toivon, että tästä kokoelmasta on sinulle hyötyä.

CSS 3D-pilvet

Tässä demossa voit luoda ja muokata upeita pilviä 3D-muodossa. Nämä CSS-pilvet tekevät meille selväksi, että verkkoteknologioiden mahdollisuudet ovat lähes rajattomat.

Puhtaat CSS-logot

Nämä ovat esimerkkejä logoista, jotka on tehty vain puhtaalla CSS:llä. Ajattele vain sitä, sen luomisessa ei käytetty kuvia. Se on vain jotain.

Aakkoset CSS-animaatiolla

Loistava ja taiteellinen esimerkki CSS:n avulla aakkosissa

3D-navigointi sivustolle

Yksinkertainen mutta erittäin tyylikäs navigointipalkki sivustolle, tietysti tehty vain CSS3:lla. ei kuvia tai käsikirjoituksia.

Google Doodle CSS:llä

Yksi monista doodleista alkaen Googlen hakukone, tehty CSS:llä. Tämä loistava esimerkki CSS-animaatioiden korkealaatuinen käyttö

Liukusäädin

Hyvin tehty ja laadukas kuvan liukusäädin. Plus 4 esimerkkiä demossa.

Animoitu kaksoisrengas

Kaunis animoitu ja monivärinen sormus, jossa ei ole paljon CSS-koodia

Sumeus CSS:ssä

Minusta näyttää erittäin tarvittava suodatin, varsinkin kun se on tehty puhtaalla CSS:llä. Sumennuksen avulla voit kiinnittää käyttäjän huomion tiettyyn kohtaan.

Flexboxin täydellinen opas

Tämä artikkeli käsittelee reagoivia Flexbox-lohkoja. Se puhuu täysin näistä lohkoista, vaikka artikkeli on englanninkielinen.

Värikäs ja animoitu valikko CSS3:lla

Kaunis avattava valikko kuvakkeilla varustetulle verkkosivustolle. Valtava plussa on, että se on tehty kokonaan CSS:llä.

CSS-suodattimet

Laadukas englanninkielinen materiaali, josta puhutaan CSS:n avulla suodattimet kuviin.

CSS-lomakkeet

Postaa aiheesta CSS-lomakkeet lukuisilla esimerkeillä

Edistymispalkit CSS:ssä

Oppitunti tyylikkäiden edistymispalkkien luomisesta puhtaan CSS:n ja animaation avulla. Voit myös nähdä esimerkin ja ladata lähteet.

Animaatio - Animate.css

Nykyään Internetin suosituin CSS-animaatioprojekti. Ja luultavasti yksinkertaisin ja laadukkain, ja myös ilmainen.

Latausilmaisimet - Spinkit

Rehellisesti sanottuna nämä indikaattorit on jo nähty blogissa, mutta mielestäni ne ovat jälleen näyttämisen arvoisia. Koska nämä ovat Internetin kauneimpia CSS-indikaattoreita.

Painikkeet

Nykyään on vaikea yllättää CSS-painikkeilla, mutta tämä on melko kunnollinen vaihtoehto

Generaattori kytkimien luomiseen

Pienet ja laadukas internet sovellus, jolla voit luoda kauniita kytkimiä käytettäväksi sivustolla.

Työkaluvinkit

CSS-kirjasto ilmaisille työkaluvihjeille - Hint.css

Värimallit

Väriteemoja ihmisille, jotka eivät halua kaivaa koodia

Monilla vierailijoilla on kysyttävää Animate.css-kirjaston käytöstä käytännössä. Todellisuudessa kaikki tapahtuu yksinkertaisesti, sinun tarvitsee vain käydä läpi kaikki vaiheet kerran ja sitten analogisesti toistaa joitain toimia.

1. Ensin sinun on ladattava ja yhdistettävä kirjasto. Vaihtoehtoja on kolme.

• Täysversio . Sisältää yli kolme tuhatta koodiriviä, joiden tilavuus on noin 60 kt. Se sopii hyvin animaatioon yleisesti tutustumisen ensimmäiseen vaiheeseen, koska sen avulla voit katsoa, ​​miten se kaikki toimii.
• Pakattu versio (hämärtynyt, puhuva ammattikielellä). CSS-tiedostossa ei ole sarkaimia, välilyöntejä tai rivinvaihtoja. Tästä johtuen tiedoston koko pienenee puolitoista kertaa, mutta koodin lukeminen tulee vaikeaksi.
• Valikoivia tehosteita. Sopii parhaiten useimpiin tehtäviin, koska sen avulla voit määrittää vain haluamasi tehosteet ja poistaa tarpeettomat.

2. Jos haluat käyttää animaatiotehostetta haluttuun elementtiin, lisää siihen kaksi luokkaa - animoitu ja luokka tehosteen nimellä, esimerkiksi fadeInDown (katso luettelo kaikista tehosteista ja niiden nimistä). Oletetaan esimerkiksi, että haluat lisätä välkkymisen kaikkiin sivun kuviin. HTML:ssä kirjoitamme seuraavaa:

Jos sivusto käyttää jQueryä, luokkien lisääminen on yksinkertaistettua ja tapahtuu JavaScriptin kautta.

$(dokumentti).ready(function() ( $("img").addClass("animoitu flash"); ))

3. Itse animaatio käynnistyy automaattisesti, kun sivu latautuu. Tästä on hyötyä ponnahdusviesteissä, jotka on suunniteltu kiinnittämään käyttäjän huomio (esimerkki 1).

Esimerkki 1: Ponnahdusviesti

Varoitus .varoitus ( tausta: #fc0; täyttö: 10px; reuna: 1px kiinteä #000; ) Senith tuntiluku arvioi ekvatoriaalisen sekstantin!

Jotta tehoste toimisi vietäessä hiiren osoitin elementin päälle, sinun on käytettävä JavaScriptiä. Harkitse esimerkiksi kuvia, jotka liikkuvat, kun viet hiiren osoittimen niiden päälle. Siirry tagiin lisää animoitu luokka ja yhdistä jQuery (esimerkki 2).

Esimerkki 2. Galleria

Galleria $(document).ready(function() ( $("img.animated").hover(function() ( $(this).addClass("bounce"); // Lisää poistumisluokka), function() ( $(this).removeClass("bounce"); // Poista luokka ))))

SISÄÄN tässä esimerkissä kun siirrät hiiren animoidun luokan kuvan päälle, toinen pomppimisluokka lisätään; jos kursori poistetaan, myös poistumisluokka poistetaan.

4. Lopuksi voit mukauttaa animaation mieleiseksesi muuttamalla animaation nopeutta sekä asettamalla viiveaikaa CSS:n kautta. Molemmat ovat valinnaisia ​​ja niitä voidaan käyttää tarvittaessa.

Animoitu ( -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o -animaatio-viive: 1s; -moz-animaatio-viive: 1s;

Hei kaikki. Törmäsin äskettäin sarjaan erittäin hyödyllisiä ja mielenkiintoisia video-opetusohjelmia aiheesta " CSS-animaatio" Mutta huonoa onnea, kaikki videot olivat päällä Englannin kieli, ja luultavasti kaikki taittosuunnittelijat eivät osaa englantia riittävällä tasolla ymmärtääkseen ja omaksuakseen kaiken tarvittavat tiedot. Siksi päätin kääntää nämä oppitunnit sinulle (tai pikemminkin tehdä ilmainen käännös). Ei tarvitse kiittää. Niin:

CSS-animaatio. Johdanto + siirtymäominaisuus (tämä artikkeli)

CSS-animaatio. Avainkehykset – tulossa pian

Milloin ja miksi käyttää CSS-animaatioita? - tulossa pian

Mikä on CSS-animaatio?

Ennen kuin kerron kuinka tehdä CSS-animaatioita ja miksi niitä ylipäätään tarvitaan, haluaisin ensin selittää mitä CSS-animaatio on, antaa määritelmän tai jotain.

Animaatioilla verkossa on kaksi pääideaa. Ensimmäinen ajatus on herättää jotain eloon. Olet kuin tohtori Frankenstein. Sinulla on eloton hirviö ja hengität siihen elämää. Toinen on liikkeen visualisointi. JA avainsana tässä se on nimenomaan "liikettä".

Kuinka animoida?

CSS:ssä on kaksi päätyökalua, joilla voimme siirtää elementtejä verkkosivulla. Ensimmäinen (josta puhumme myöhemmin) on siirtymäominaisuus. Ensinnäkin sen avulla luomme animaatioita CSS:ssä. Toinen työkalu on animaatioominaisuus, joka on yhdistetty avainkehysten (@keyframes) kanssa. Tarkastelemme tätä työkalua yksityiskohtaisemmin seuraavassa oppitunnissa, mutta juuri nyt tarkastelemme CSS-siirtymäominaisuutta. Ja sitten puhutaan käyttäjäkokemuksen (UX) perusteella, mitä sivulla pitäisi animoida (kun käyttäjä sitä tarvitsee) ja mitä ei (kun animaatio näyttää tyhmältä ja sopimattomalta).

CSS-siirtymäominaisuus - parametrien ja arvojen syntaksi

Katsotaanpa ensin, kuinka tämä ominaisuus luetaan ja ymmärretään sen syntaksi. Kirjoitamme tämän ominaisuuden näin:

siirtymä : [ omaisuutta] [kesto] [ajoitustoiminto] [viive] ;

siirtymä : korkeus 1s helpotus 0,2s ;

Määritämme tämän ominaisuuden elementille, jonka haluamme animoida. Tämä elementti tulee sileäksi siirtyminen(tai vaiheittain) useiden tilojen välillä (esimerkiksi korkeus 100 pikseliä ja korkeus 200 pikseliä). Ja miltä tämä tulee näyttämään siirtyminen(englanninkielisestä siirtymisestä), riippuu sille antamistamme parametreista.

Siirtymäominaisuuden ensimmäinen parametri (arvo) on toinen omaisuutta animoitava elementti (esim. korkeus).

Toinen parametri on animaation kesto (kesto), eli kuinka kauan elementin siirtyminen tilasta toiseen kestää (esimerkiksi 2s tai 2000ms).

Kolmas parametri on ajoitustoiminto[ajoitustoiminto] (kevennystoiminto [kevennystoiminto]). Kuinka animaation intensiteetti jakautuu koko ajan. Esimerkiksi animaatio voi alkaa äkillisesti ja sitten hidastua lopussa ja lopettaa siirtymisen sujuvasti. Voidaan käyttää avainsanoina (esim. helppoushelppous-sisään-ulos,lineaarinen) ja Bezier-kuutiofunktiot (esim. kuutio-bezier(0,17, 0,67, 0,83, 0,67)). Voit helposti ja kätevästi mukauttaa Bezier-kuution tässä resurssissa http://cubic-bezier.com sekä vaiheet-toiminnon luodaksesi animaation kehys ruudulta (askel-askeleelta).

Ja lopuksi parametri viive. Animaatioviive on aika, jonka joudut odottamaan ennen kuin animaatio (tässä tapauksessa siirtymä) alkaa.

Esimerkki CSS-siirtymäanimaatiosta

Katsotaanpa tätä CSS-esimerkki animaatiot:

siirtymä: läpinäkyvyys 300 ms easy-in-out 1s;

Täällä animoimme vain omaisuutta opasiteetti(opasiteetti). Tämä tarkoittaa, että jos elementillä, jota aiomme animoida, on muita ominaisuuksia, kuten korkeus, leveys tai väri, ja vaikka nämä ominaisuudet eroavat eri osavaltiot elementtiä siis sujuva siirtyminen(animaatio) on saatavilla vain opasiteettiominaisuudet. Ymmärrätkö?

Voit myös käyttää "kaikki"-avainsanaa tietyn ominaisuuden sijasta. Tämä tarkoittaa, että animoimme ehdottomasti kaikki elementin ominaisuudet, jotka muuttuivat elementin uudessa tilassa (ei vain opasiteettia) ja joita voidaan animoida ollenkaan. Koska, kuten tiedät, kaikkia ominaisuuksia ei voida animoida. Mutta siitä lisää vähän myöhemmin.

Toinen parametri ( 300 neiti) kertoo, että animaatio kestää vain 300 millisekuntia. Eli elementti ilmestyy nopeasti tai liukenee nopeasti riippuen ominaisuusarvoista sen kahdessa tilassa.

Ajoitustoiminto ( helppous-sisään-ulos) kolmannella parametrilla tekee animaation alusta ja lopusta tasaisemman.

Viive ( 1 s) näyttää kuinka myöhään animaation on oltava ennen kuin se käynnistyy.

Yleensä tämä on kaava, jolla tallennetaan siirtymäanimaatio. Tämä on syntaksi. Tarvittaessa voit lisätä useamman kuin yhden [ominaisuus]-siirtymän yhdelle elementille. Voit esimerkiksi animoida elementin korkeuden ja leveyden muutoksia eri parametreilla. Voit tehdä tämän lisäämällä siirtymäominaisuuteen puolipisteen sijasta vain pilkku ja kirjoittamalla parametrit toiselle ominaisuudelle. Älä myöskään unohda laittaa puolipistettä loppuun, jotta se toimii.

Mitä voit animoida CSS:ssä?

Toistaiseksi olemme keskustelleet vain siirtymäominaisuuden syntaksista. Puhutaan nyt ominaisuuksista, mitä voimme animoida ja mitä emme. Koska on joitain asioita, joita ei vain ole järkevää animoida, ja joitain ominaisuuksia ei vain voi animoida.

Animable ominaisuudet

Otetaan esimerkiksi ominaisuudet, kuten:

Fonttikoko;

taustaväri;

leveys;

vasemmalle (kuinka kauas vasemmalta puolelta elementtiä voidaan siirtää [asemoida]…

On selvää, että on järkevää animoida nämä ominaisuudet. Jos muutat niiden arvoja, se muuttaa elementin visuaalisesti. Jos muutat fonttikokoa esimerkiksi 14 pikselistä 28 pikseliin, huomaat, että fontin koko kasvaa vähitellen ja syntyy animaatio, joka kestää jonkin aikaa. Animaatio on aina järkevää, jos ominaisuusarvot ovat selkeitä (useimmiten numeerisia) arvoja. Jos lisäät fontin koon 100 pikseliin, näet selvästi kirjainten kasvavan. Myös taustavärin tasainen muutos voidaan havaita [koska verkossa värillä on numeerinen koodi, esim. punainen rgb(255;0;0)]. Nämä ominaisuudet ovat animoituja.

Yleensä muista, että jos kuvittelet, että se on animoitu, se voidaan animoida. Useimmiten tämä toimii.

Ei-animoitavat ominaisuudet

Ja tässä on luettelo ominaisuuksista, joita ei voi animoida (esimerkki):

näyttö;

font-perhe;

asema…

Nämä ovat joitain niistä, jotka otin esimerkkinä, jotta voit tuntea eron animoitavien ja ei-animoitavien CSS-ominaisuuksien välillä.

Otetaan näyttö. Voitteko kuvitella, kuinka visuaalisesti "" näyttö:lohko;" ja " näyttö:linjassa-lohko;"? Miten se voi muuttua sujuvasti? ulkomuoto elementti välillä " asema:suhteellinen;"ja" asema:ehdoton;"? Ei tietenkään, elementti näyttää erilaiselta, jos näitä ominaisuuksia muutetaan. Mutta kuinka voit kuvitella siirtyminen? Et voi tehdä sitä. Eikö? Et voi kuvitella muuttavan Helvetican Georgiaksi, jokaista kirjainta, se ei vain toimi. Voit vaihtaa näitä fontteja, mutta ne muuttuvat äkillisesti, eikä animaatioita tapahdu.

Animaatiosuorituskyky CSS:ssä

Yleensä monet ominaisuudet ovat animoituja, mutta jotkut eivät. Nyt päätetään, mitkä animoitavat ominaisuudet ovat parempia animaatioon ja mitkä huonompia. Kyse on suorituskyvystä. Käsittelimme esityksen aihetta, koska animaatio on resurssiintensiivinen prosessi.

Yleisesti ottaen seuraavat asiat toimivat parhaiten animaatiossa:

Sijoittaminen sivulla

Skaalaus

Kierto

Läpinäkyvyys

Lisäksi tämän luettelon kolme ensimmäistä kohtaa ovat kaikki muunnosominaisuuden parametreja (käännä, skaalaa, kierrä). Paikannus tapahtuu X- ja Y-akseleita pitkin.

Jos päätät animoida jotain muuta, vaarana on, että et saa pehmeää, tasaista 60 ruudun sekunnissa tapahtuvaa siirtymää. Paul Lewis & Irish

Ja juuri tämä kiinnostaa meitä, kun puhumme animaation esityksestä. Yleisesti ottaen animaatioon sopivimmat ominaisuudet ovat muunnos ja opasiteetti. Kun animoidaan mitä tahansa muuta, animaation fps voi pudota paljon alle 60 fps.

Tehdään tämä kohta yhteenveto seuraavasti. Yritä välttää Web-sivun elementtien uudelleenpiirtämistä ja sellaisten elementtien animoimista, joita selaimen on vaikea hahmontaa (esimerkiksi varjoja).

Kuinka tehdä animaatioita CSS:ssä?

Nyt selvitetään kuinka animaatio aloitetaan. Mitä on tehtävä, jotta elementti alkaa animoitua. Toisin sanoen kuinka animaatiota tehdään CSS:ssä.

Se ei ole vaikeaa ja tekemistä riittää eri tavoilla. Mutta on kaksi pääasiallista, jotka sinun on hallittava pakollinen. Ensimmäinen menetelmä on animaatio, kun hiiri viedään elementin päälle (pseudoluokka: hover). Vie hiiri elementin päälle ja animaatio käynnistyy. Tällä tavalla voit animoida itse elementin tai minkä tahansa sen lapsielementtejä. Sitten näytän kuinka se toimii. Toinen tapa on muuttaa elementtiluokkaa. Eli sinulla on normaali elementti, muutat (tai lisäät) sen luokkaa luokkaan, jolla on täysin erilaiset tyylit. Jos lisäät luokan, animaatio syntyy, ja jos poistat luokan, käänteinen animaatio tapahtuu. Tämä hyvä tapa valikoiden tai avattavien luetteloiden animointiin.

Jälkisana

Olemme käsitelleet kaiken mitä tarvitsemme animaatioiden luomiseen puhtaalla CSS:llä. Selvitämme sen hyvin pian käytännön esimerkkejä, ja vähän myöhemmin - erittäin mielenkiintoisia esimerkkejä.

Luitko loppuun asti?

Oliko tästä artikkelista apua?

Ei oikeastaan

Mistä et oikein pitänyt? Oliko artikkeli epätäydellinen vai väärä?
Kirjoita kommentteihin ja lupaamme parantaa!

| 18.02.2016

CSS3 avautuu rajattomat mahdollisuudet käyttöliittymäsuunnittelijoille, ja suurin etu on, että melkein mikä tahansa idea voidaan helposti toteuttaa ja toteuttaa ilman JavaScriptin käyttöä.

On hämmästyttävää, kuinka yksinkertaiset asiat voivat elävöittää tavallista verkkosivua ja tehdä siitä helpommin käyttäjien saatavilla. Se on noin CSS3-siirtymistä, joiden avulla elementti voi muuntua ja muuttaa tyyliä esimerkiksi osoitinta liikuttaessa. Alla olevat yhdeksän esimerkkiä CSS3-animaatioista auttavat sinua luomaan responsiivisen ilmapiirin sivustollesi ja parantamaan yleinen muoto sivuja kauniiden sulavien siirtymien ansiosta.

Tarkempia tietoja varten voit ladata arkiston tiedostoineen.

Kaikki tehosteet toimivat siirtymäominaisuuden avulla. siirtyminen- "siirtyminen", "muunnos" ja pseudo-class:hover, joka määrittää elementin tyylin, kun hiiren osoitin liikkuu sen päällä (opetusohjelmassamme). Esimerkeissämme käytimme div-lohko 500x309 pikseliä, alkuperäinen taustaväri #6d6d6d ja siirtymäaika tilasta toiseen 0,3 sekuntia.

Body > div (leveys: 500px; korkeus: 309px; tausta: #6d6d6d; -webkit-siirtymä: kaikki 0,3s helppo; -moz-siirtymä: kaikki 0,3s helppo; -o-siirtyminen: kaikki 0,3s helppous;; siirtyminen: kaikki 0.3s helppoa )

1. Vaihda väriä osoitin

Aikoinaan tällaisen efektin toteuttaminen oli melko vaivalloista työtä tiettyjen RGB-arvojen matemaattisten laskelmien kanssa. Toistaiseksi riittää kirjoittelu CSS-tyyli, jossa sinun on lisättävä pseudo-class:hover valitsimeen ja asetettava taustaväri, joka tasaisesti (0,3 sekunnissa) korvaa alkuperäisen taustavärin, kun viet hiiren lohkon päälle:

Väri:hover ( tausta:#53ea93; )

2. Kehyksen ulkonäkö

Mielenkiintoinen ja elävä muutos - sisäkehys, joka näkyy sujuvasti, kun viet hiiren osoitinta. Sopii hyvin erilaisten painikkeiden koristeluun. Tämän vaikutuksen saavuttamiseksi käytämme pseudo-class:hover-ominaisuutta ja box-shadow-ominaisuutta inset-parametrin kanssa (asettaa varjon elementin sisällä). Lisäksi sinun on asetettava varjon venytys (tapauksessamme se on 23px) ja sen väri:

Border:hover ( laatikko-varjo: upotettu 0 0 0 23px #53ea93; )

3. Swing

Tämä CSS-animaatio on poikkeus, koska siirtymäominaisuutta ei käytetä tässä. Sen sijaan käytimme:

• @keyframes on perusohje kehyskohtaisen CSS-animoinnin luomiseen, jonka avulla voit tehdä ns. kuvakäsikirjoitus ja kuvaile animaatiota avainkohtien luettelona;
• animation ja animation-itration-count - ominaisuudet animaatioparametrien (kesto ja nopeus) ja jaksojen lukumäärän (toistot) asettamiseen. Meidän tapauksessamme toista 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); muunnos: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); muunnos: translateX(-9px); ) 40 % ( -webkit-transform: translateX(6px); muunnos: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); muunnos: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px) muunnos: translateX(3px) 100% ( -webkit-transform: translateX(0); muunnos: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX(); 9px: muunnos: translateX(9px) 30% ( -webkit-transform: translateX(-9px); muunnos: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); muunnos: translateX); (6px) 50 % ( -webkit-transform: translateX(-6px); muunnos: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); muunnos: translateX(3px); ) 100 % ( -webkit-transform: translateX(0); muunnos: translateX(0); ) ) .swing:hover ( -webkit-animaatio: swing 0.6s helppous; animaatio: swing 0.6s helppous; -Webkit-animation-itration-count: 1; animaatioiden iteraatioiden määrä: 1; ) 4. Vaimennus

Häivytysvaikutus on pohjimmiltaan normaali muutos elementin läpinäkyvyys. Animaatio luodaan kahdessa vaiheessa: ensin on asetettava alkuperäinen läpinäkyvyystila 1 - eli täydellinen läpinäkyvyys ja sitten määritettävä sen arvo, kun hiirtä vietetään - 0,6:

Häivytys ( opasiteetti: 1; ) .fade:hover ( opasiteetti: 0,6; )

Jos haluat päinvastaisen tuloksen, vaihda arvot:

5. Suurennus

Jos haluat suurentaa lohkoa, kun osoitin vie sen päälle, käytämme muunnosominaisuutta ja asetamme sen skaalaukseen (1.2). Tässä tapauksessa lohko kasvaa 20 prosenttia säilyttäen sen mittasuhteet:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Vähentäminen

Elementin pienentäminen on yhtä helppoa kuin sen suurentaminen. Jos viidennessä pisteessä skaalan suurentamiseksi piti määrittää arvo, joka on suurempi kuin 1, niin lohkon pienentämiseksi määritämme yksinkertaisesti arvon, joka on pienempi kuin yksi, esimerkiksi asteikko(0,7) . Nyt kun hiirtä liikutetaan, lohko pienenee suhteellisesti 30 prosenttia alkuperäisestä koostaan:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); muunnos: scale(0.7); )

7. Muuntaminen ympyräksi

Yksi yleisesti käytetyistä animaatioista on suorakaiteen muotoinen elementti, joka muuttuu ympyräksi, kun osoitin viedään sen päälle. Käyttämällä CSS-ominaisuudet border-radius, jota käytetään yhdessä :hover- ja siirtymistoimintojen kanssa, tämä voidaan toteuttaa ilman ongelmia:

Ympyrä:hover (reunuksen säde: 70 %; )

8. Kierto

Hauska animaatiovaihtoehto on kiertää elementtiä tietyn määrän asteita. Tätä varten tarvitsemme muunnosominaisuuden uudelleen, mutta eri arvolla - rotateZ(20deg) . Näillä parametreilla lohkoa kierretään 20 astetta myötäpäivään suhteessa Z-akseliin:

Rotate:hover ( -webkit-muunnos: rotateZ(20deg); -ms-transform: rotateZ(20deg); muunnos: rotateZ(20deg); )

9. 3D-varjo

Suunnittelijoiden mielipiteet eroavat siitä, onko tämä vaikutus sopiva litteässä suunnittelussa. Tämä CSS3-animaatio on kuitenkin melko omaperäinen ja sitä käytetään myös verkkosivuilla. Saavutamme kolmiulotteisen tehosteen käyttämällä jo tuttuja box-shadow ominaisuuksia (luo monikerroksisen varjon) ja muunnamme parametrilla translateX(-7px) (varmistaa lohkon vaakasuoran siirtymisen vasemmalle 7 pikseliä ):

Kolmipiste: hover ( ruutuvarjo: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 3px 3pxe #53ea93, 3px 3pxe ; -webkit-transform: translateX( -7px; muunnos: translateX(-7px)

Selaimen tuki

Seuraavat selaimet tukevat tällä hetkellä siirtymäominaisuutta:

Pöytäkoneen selaimet

Internet Explorer	IE 10 ja uudemmat tuet
Kromi	Tuettu versiosta 26 alkaen (kunnes versio 25 toimii -webkit-etuliitteellä)
Firefox	Tuettu versiosta 16 alkaen (versioissa 4-15 se toimii -moz-etuliitteellä)
Ooppera	Tuettu versiosta 12.1 alkaen
Safari	Tuettu versiosta 6.1 alkaen (versioissa 3.1-6 se toimii -webkit-etuliitteellä)

Myös muut näissä esimerkeissä käytetyt ominaisuudet, kuten muunnos , box-shadow jne., ovat myös lähes kaikki tuettuja nykyaikaiset selaimet. Jos kuitenkin aiot käyttää näitä ideoita projekteissasi, suosittelemme, että tarkistat selaimen yhteensopivuuden.

Toivomme, että näistä CSS3-animaatioesimerkeistä oli apua. Toivotamme sinulle luovaa menestystä!