Per pastaruosius kelerius metus CSS įdiegė daug įdomių funkcijų, kurios daro žiniatinklio kūrimą smagiau. Vienas iš šių dalykų yra CSS3 animacija. Iki CSS3 animacija galėjo būti įgyvendinta tik naudojant „Javascript“.
Šiandien parodysime, kaip dirbti su CSS3 biblioteka, kuri animacijos kūrimą pavers maloniu ir lengvu procesu: Animate.css.
Animate.css yra biblioteka, skirta kurti animacijas naudojant CSS3. Ši biblioteka palaiko daugiau nei 50 skirtingų animacijos efektų, kurie beveik visi veikia skirtingose naršyklėse, palaikomose CSS3.
Šiuos efektus galima pritaikyti tekstui, vaizdams, formoms ir pan.
PradėkimeNorėdami suaktyvinti Animate.css, prijunkite reikiamas klases prie puslapio elemento. Norėdami pradėti, į antraštės skyrių įtraukite failą animate.css. Biblioteką galite atsisiųsti iš „Github“ saugyklos.
Pagal numatytuosius nustatymus Animate.css paleidžia animaciją vieną kartą, kai įkeliamas puslapis. Kad animacija būtų paleista cikliškai, pridėkite šiek tiek Javascript.
... ...
HTMLPirmiausia norimam elementui turime priskirti .animated klasę, po to animacijos tipo klasę.
Šis tekstas bus animuotas.
Tai viskas! Dabar animacija bus paleista, kai bus įkeltas puslapis. Pridėkime „Javascript“, kad būtų paleista animacija, kai įvykis suaktyvinamas. „.option“ klasė yra visiškai savavališka, galite ją pakeisti, kad tiktų jums.
Papildomi CSS nustatymaiJei norime, kad animacija nesustotų arba skirtųsi jos vykdymo laikas, tuomet turime pakoreguoti kai kurias reikšmes.
Norėdami slinkti animaciją n-tąją ar begalinį skaičių kartų, galime koreguoti atributą animation-iteration-count. Nepamirškite nurodyti naršyklės priešdėlio, skirto webkit, moz ir kt. Jei norite slinkti be galo, nustatykite reikšmę begalinis .
Jei mums reikia paleisti animaciją tam tikrą skaičių kartų, galite ją sekti taip.
Tiekėjo-animacijos-iteracijų skaičius: begalinis | ;
Norėdami pakeisti atkūrimo laiką, galite reguliuoti animacijos trukmę ir animacijos delsos ypatybes. Pavyzdys:
Parinktis ( -webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 5; )
JavascriptNorėdami animuoti tam tikro įvykio metu (pavyzdžiui, spustelėjus), naudosime Javascript. Pirma, pridėkime nuorodą.
Šis tekstas bus animuotas. Spustelėkite norėdami animuoti!
Naudodami Javascript galime sukurti animacinę funkciją, kuriai perduosime animacijos klasės pavadinimą:
$(function() ( $("#ref").click(function() ( animate(.demo", "bounce"); return false; )); )); function animate(element_ID, animation) ( $(element_ID).addClass(animation); var wait = window.setTimeout(function())( $(element_ID).removeClass(animation)), 1300); )
Sveiki. Leiskite jums priminti, apie ką jau rašiau, bet tai buvo tik pagrindiniai principai. Dabar siūlau susipažinti su paruoštu animacijos savybių rinkiniu viename animate.css faile. Tai ne generatorius, o biblioteka, kuri gana teisingai veikia visose populiariose naršyklėse. Ir jūs galite pažvelgti į šiuos pavyzdžius.
Prijungiama Animate.cssJei norite sukurti svetainės vaizdo, teksto ar mygtukų CSS animaciją ir visa tai įgyvendinti nenaudodami Javascript, tereikia standartiniu būdu prijungti vieną failą, kuris jau buvo minėtas aukščiau, ty tarp galvos žymų.
Taip nurodomos objektų animacijos savybės. , būtina animacija, o tada yra vienas iš efektų. Bet mums reikia paties ciklo ir dabar tai padarysime. Tai galima padaryti sukuriant naują klasę ir jai arba esamai priskiriant specialias savybes.
Ciklinė animacija Animate.css| .new ( animacijos iteracijų skaičius : begalinis ; ) |
Nauja(animacijos iteracijų skaičius: begalinis;)
Ir kad jums būtų dar aiškiau, ką aš čia bandžiau paaiškinti, pažiūrėkite šį vaizdo įrašą, kuriame realiu pavyzdžiu aiškiai pademonstruoju, kaip tai veikia, taip pat atsisiųskite pačius stilius.
Vis dažniau daugelyje nukreipimo puslapių ar reklaminių puslapių galite rasti įvairių animacijos efektų. Juk jie puslapį daro įdomesnį ir patrauklesnį.
Iš esmės šie efektai nustatomi tam tikram įvykiui (spustelėkite arba užveskite pelės žymeklį ant elemento), arba slenkant puslapį. Manau, kad esate susidūrę su tokiomis svetainėmis, slenkant puslapį sklandžiai ir gražiai atsiranda įvairūs elementai.
Anksčiau, norint įgyvendinti šiuos efektus, reikėjo naudoti tik JS, tačiau kūrimas nestovi vietoje ir išleidus CSS3 visus šiuos efektus jame galima įdiegti.
Šioje pamokoje supažindinsime jus su labai įdomiu įrankiu, pavadintu animate.css. Tai yra paruoštas CSS stiliaus lapas, kurio arsenale yra daugiau nei 50 skirtingų efektų ir visi šie efektai yra įdiegti CSS3.
Norėdami jį naudoti, tereikia nustatyti tam tikrą reikiamo elemento klasę ir šiam elementui bus pritaikytas animacijos efektas. Kaip jau sakiau anksčiau, ši animacija įdiegta CSS3, todėl šie efektai veiks visose šiuolaikinėse naršyklėse.
Dabar atidžiau pažvelkime į animate.css.
Pagrindinis HTML žymėjimasŽiūrėti vaizdo pamoką
- atšokti
- blykstė
- pulsas
- guminė juosta
- purtyti
- sūpynės
- klibėti
- bounceIn
- bounceInDown
- bounceIn Left
- bounceInRight
- bounceInUp
- BounceOut
- BounceOutDown
- bounceOutLeft
- BounceOutRight
- bounceOutUp
- išnyks
- fadeInDown
- fadeInDownBig
- išnyksKairėje
- fadeInLeftBig
- išbluktiTeisingai
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- Išnykti
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- apversti
- flipOutX
- FlipOutY
- lightSpeedIn
- lightSpeedOut
- pasukti
- pasukti į apačią į kairę
- pasukti į apačią į dešinę
- pasukti į viršų į kairę
- pasukti į viršų į dešinę
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- vyris
- įsukti
- išvynioti
- priartinti
- priartinti žemyn
- priartinti į kairę
- priartinti dešinėje
- priartinti
- nutolinti
- priartinti žemyn
- ZoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideKairėje
- slideInright
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
Jei padarėte viską, kaip aprašyta aukščiau, tada, kai puslapis bus įkeltas, šis efektas bus pritaikytas elementui ir viskas, animacija tuo pasibaigs.
Bet ką daryti, jei jums reikia, kad animacija tęstųsi be sustojimo?
Norėdami tai padaryti, tiesiog pridėkite kitą mūsų animacinio elemento klasę. Ši klasė yra begalinė.
Antraštė
Nustatykite animaciją, kai užvedate pelės žymeklį virš elemento
Žiūrėti vaizdo pamoką
Visi anksčiau aprašyti pavyzdžiai nustato animaciją iškart po puslapio įkėlimo, tačiau praktikoje tai retai reikalinga. Praktikoje labai dažnai reikia nustatyti animaciją užvedus pelės žymeklį virš elemento, todėl žemiau pateikiau paruoštą kodą šiam įgyvendinimui.
HTMLMūsų HTML žymėjimas šiek tiek pasikeitė, dabar mums nereikia nurodyti klasės, kuri būtų atsakinga už konkrečią animaciją. Šią reikšmę turime nurodyti specialiame duomenų efekto atribute. Prašome atkreipti į tai dėmesį, tai labai svarbu.
Antraštė
Čia yra nedidelis jQuery kodas, kuris stebės pelės žymeklio užvedimo įvykį ir jei šis įvykis įvyks, scenarijus prie jo pridės klasę, kurios reikšmė nurodoma atribute data-effect. Pridėjus šią klasę bus pritaikyta animacija.
Funkcija animate(elem)( var efektas = elem.data("efektas"); if(!effect || elem.hasClass(efektas)) return false; elem.addClass(effect); setTimeout(function())( elem. removeClass (efektas); ), 1000); ) $(".animuotas").mouseenter(function() ( animate($(this)); ));
Žinoma, galite pakeisti šį scenarijų, kaip norite, pavyzdžiui, galite pakeisti pelės įvedimo įvykį, kad jį spusteltumėte. Tada tokiu atveju animacija įvyks ne tuo metu, kai pelė užves virš elemento, o spustelėjus.
Animacijos kūrimas slenkant puslapįŽiūrėti vaizdo pamoką
Ir galiausiai, pažvelkime į kitą pavyzdį, kur galite lengvai naudoti animate.css.
Būtent, slinkdami puslapį galite nustatyti skirtingus elementų efektus. Šiems tikslams, be animate.css, mums reikės ir specialaus wow.js scenarijaus.
CSS3 animacija daro svetaines dinamiškas. Tai atgaivina tinklalapius ir pagerina vartotojo patirtį. Skirtingai nuo CSS3 perėjimų, animacijos kūrimas pagrįstas pagrindinių kadrų, kurie leidžia automatiškai leisti ir kartoti efektus tam tikrą laiką, taip pat sustabdyti animaciją cikle.
CSS3 animacija gali būti naudojama beveik visiems html elementams, taip pat:prieš ir:po pseudoelementams. Puslapyje pateikiamas animuotų savybių sąrašas. Kurdami animacijas nepamirškite galimų našumo problemų, nes kai kurių savybių keitimas reikalauja daug resursų.
Įvadas į CSS animaciją Naršyklės palaikymasIE: 10.0
Firefox: 16.0, 5.0 -moz-
„Chrome“: 43.0, 4.0 – žiniatinklio rinkinys-
„Safari“: 4.0 - žiniatinklio rinkinys-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -Webkit-
„Opera Mini“: -
„Android“ naršyklė: 44, 4.1 - žiniatinklio rinkinys-
„Chrome“, skirta „Android“: 44
Pagrindiniai kadrai naudojami animacijos savybių reikšmėms nurodyti įvairiuose animacijos taškuose. Pagrindiniai kadrai apibrėžia vieno animacijos ciklo elgesį; animacija gali kartotis nulį ar daugiau kartų.
Pagrindiniai kadrai nurodomi naudojant @keyframes taisyklę, apibrėžtą taip:
@keyframes animacijos pavadinimas (taisyklių sąrašas)
Animacijos kūrimas pradedamas nustatant @keyframes taisyklės pagrindinius kadrus. Rėmeliai nustato, kurios ypatybės kuriame veiksme bus animuojamos. Kiekviename kadre gali būti vienas ar daugiau vienos ar kelių savybių ir verčių porų deklaracijų blokų. @keyframes taisyklėje yra elemento animacijos pavadinimas, susiejantis taisyklę ir elemento deklaravimo bloką.
@keyframes šešėlis ( nuo (teksto šešėlis: 0 0 3 piks. juodas;) 50 % (teksto šešėlis: 0 0 30 piks. juodas;) iki (teksto šešėlis: 0 0 3 piks. juodas;) )
Pagrindiniai kadrai kuriami naudojant nuo ir į raktinius žodžius (atitinka reikšmes 0% ir 100%) arba naudojant procentinius taškus, kurių galima nurodyti tiek, kiek norite. Taip pat galite derinti raktinius žodžius ir procentinius taškus. Jei rėmeliai turi tas pačias savybes ir reikšmes, juos galima sujungti į vieną deklaraciją:
@keyframes perkelti ( iš, į ( viršuje: 0; kairėje: 0; ) 25%, 75% (viršuje: 100%;) 50% (viršuje: 50%;) )
Jei nenurodyta 0% arba 100% kadrų, tada vartotojo naršyklė juos sukuria naudodama apskaičiuotas (iš pradžių nustatytas) animacinės nuosavybės vertes.
Jei kelios @keyframes taisyklės yra apibrėžtos tuo pačiu pavadinimu, bus suaktyvinta paskutinė dokumento eilės tvarka, o visų ankstesnių bus nepaisoma.
Kai bus paskelbta @keyframes taisyklė, galime ją nurodyti animacijos ypatybėje:
H1 (šrifto dydis: 3,5 em; spalva: tamsiai purpurinė; animacija: šešėlis 2s be galo lengvas įvedimas; )
Nerekomenduojama animuoti neskaitinių reikšmių (su retomis išimtimis), nes rezultatas naršyklėje gali būti nenuspėjamas. Taip pat neturėtumėte kurti pagrindinių kadrų ypatybių vertėms, kurios neturi vidurio taško, pvz., nuosavybės verčių spalva: rožinė ir spalva: #ffffff , plotis: automatinis ir plotis: 100 pikselių arba kraštinės spindulys: 0 ir kraštinė- spindulys: 50% (šiuo atveju būtų teisinga nurodyti kraštinės spindulį: 0%).
1.1. Laiko nustatymo funkcija raktų kadramsPagrindinio kadro stiliaus taisyklė taip pat gali deklaruoti laikiną funkciją, kuri turėtų būti naudojama, kai animacija pereina į kitą pagrindinį kadrą.
Pavyzdys
@keyframes atšokimas ( nuo ( viršuje: 100 piks.; animacijos laiko funkcija: palengvinamas; ) 25 % ( viršuje: 50 piks.; animacijos laiko funkcija: lengva įjungti; ) 50 % ( viršuje: 100 piks.; animacijos laikas- funkcija: palengvinti; ) 75 % (viršuje: 75 piks.; animacijos laiko funkcija: palengvinti; ) iki ( viršuje: 100 piks.; ) )
Animacijai, pavadintai „bounce“, nurodyti penki pagrindiniai kadrai. Tarp pirmojo ir antrojo pagrindinio kadro (ty nuo 0% iki 25%) naudojama lengvinimo funkcija. Tarp antrojo ir trečiojo pagrindinio kadro (ty nuo 25% iki 50%) naudojama sklandaus pagreičio funkcija. Ir taip toliau. Elementas pajudės puslapiu aukštyn 50 pikselių, lėtėja pasiekęs aukščiausią tašką, o tada paspartės, kai nukris iki 100 pikselių. Antroji animacijos pusė elgiasi panašiai, tačiau elementas perkeliamas tik 25 pikseliais aukštyn puslapyje.
Laiko nustatymo funkcija, nurodyta iki arba 100 % pagrindiniame kadre, nepaisoma.
2. Animacijos pavadinimas: animacijos pavadinimo ypatybėYpatybė animacijos pavadinimas nurodo elementui pritaikytų animacijų sąrašą. Kiekvienas pavadinimas naudojamas norint pasirinkti pagrindinį kadrą taisyklėje, kurioje pateikiamos animacijos savybių reikšmės. Jei pavadinimas neatitinka jokių taisyklės pagrindinių kadrų, nėra animuotinų savybių arba nėra animacijos pavadinimo, animacija nebus vykdoma.
Jei kelios animacijos bandys pakeisti tą pačią ypatybę, bus vykdoma arčiausiai pavadinimų sąrašo pabaigos esanti animacija.
Animacijos pavadinime skiriamos didžiosios ir mažosios raidės, o raktinis žodis none neleidžiamas. Rekomenduojama naudoti pavadinimą, atspindintį animacijos esmę, taip pat galite naudoti vieną ar daugiau žodžių, išvardytų su brūkšneliu - arba pabraukimo ženklu _ .
Turtas nepaveldimas.
Sintaksė
Animacijos pavadinimas: nėra; animacijos pavadinimas: testas-01; animacijos pavadinimas: -slenkantis; animacijos pavadinimas: juda vertikaliai; animacijos pavadinimas: test2; animacijos pavadinimas: test3, move4; animacijos pavadinimas: inicialas; animacijos pavadinimas: paveldėti;
3. Animacijos trukmė: animacijos trukmės savybėAnimacijos trukmės ypatybė nurodo vieno animacijos ciklo trukmę. Nurodoma sekundėmis s arba milisekundėmis ms. Jei elemente nurodyta daugiau nei viena animacija, kiekvienai galite nustatyti skirtingą laiką, nurodydami reikšmes, atskirtas kableliais.
Turtas nepaveldimas.
Sintaksė
Animacijos trukmė: .5s; animacijos trukmė: 200ms; animacija-trukmė: 2s, 10s; animacijos trukmė: 15s, 30s, 200ms;
4. Laiko nustatymo funkcija: animacijos laiko nustatymo funkcijaAnimacijos laiko funkcijos ypatybė apibūdina, kaip animacija vyks tarp kiekvienos pagrindinių kadrų poros. Animacijos delsos metu laiko nustatymo funkcijos netaikomos.
Turtas nepaveldimas.
| Vertybės: | |
| linijinis | Linijinė funkcija, animacija vyksta tolygiai per visą laiką, be greičio svyravimų. |
| lengvumas | Numatytoji funkcija, animacija pradedama lėtai, greitai įsibėgėja ir sulėtėja pabaigoje. Atitinka kubinį-bezier(0.25,0.1,0.25,1) . |
| palengvinimas | Animacija prasideda lėtai, o pabaigoje sklandžiai įsibėgėja. Atitinka kubinį-bezier(0.42,0,1,1) . |
| palengvinimas | Animacija prasideda greitai, o pabaigoje sklandžiai sulėtėja. Atitinka cubic-bezier(0,0,0.58,1) . |
| lengvumas į išorę | Animacija prasideda lėtai ir baigiasi lėtai. Atitinka kubinį-bezier(0.42,0,0.58,1) . |
| kubinis-bezieris (x1, y1, x2, y2) | Leidžia rankiniu būdu nustatyti reikšmes nuo 0 iki 1. Galite sukurti bet kokią animacijos keitimo greičio trajektoriją. |
| žingsninis startas | Nustato žingsnis po žingsnio animaciją, suskaidydamas animaciją į segmentus, pakeitimai vyksta kiekvieno žingsnio pradžioje. Vertinama žingsniais (1, pradžia) . |
| pakopos pabaiga | Žingsnis po žingsnio animacija, pokyčiai vyksta kiekvieno žingsnio pabaigoje. Vertinama žingsniais(1, pabaiga) . |
| žingsniai (žingsnių skaičius, žingsnio padėtis) | Žingsnio laiko funkcija, kuriai reikalingi du parametrai. Pirmasis parametras nurodo funkcijos intervalų skaičių. Tai turi būti teigiamas sveikasis skaičius, didesnis nei 0, nebent antrasis argumentas yra "jump-none", tokiu atveju jis turi būti teigiamas sveikasis skaičius, didesnis nei 1. Antrasis parametras, kuris yra neprivalomas, nurodo žingsnio padėtį – tašką, nuo kurio prasideda animacija, naudojant vieną iš šių reikšmių:
Kai reikšmė prasideda, animacija prasideda kiekvieno veiksmo pradžioje, o vertė baigiasi kiekvieno veiksmo pabaigoje su uždelsimu. Vėlavimas apskaičiuojamas padalijus animacijos laiką iš žingsnių skaičiaus. Jei antrasis parametras nenurodytas, naudojamas numatytosios reikšmės pabaiga. |
| pradinė | |
| paveldėti |
Sintaksė
Animacijos laiko funkcija: lengvumas; animacijos laiko funkcija: lengva įjungti; animacijos laiko funkcija: palengvinimas; animacija-laikas-funkcija: lengvas įėjimas-išėjimas; animacijos laiko funkcija: linijinė; animacija-laikas-funkcija: step-start; animacijos laiko funkcija: žingsnio pabaiga; animacijos laiko funkcija: cubic-bezier(0.1, 0.7, 1.0, 0.1); animacija-laikas-funkcija: žingsniai(4, pabaiga); animacija-laikas-funkcija: lengvumas, žingsninis paleidimas, kubinis-bezier(0.1, 0.7, 1.0, 0.1); animacijos laiko funkcija: pradinė; animacijos laiko funkcija: paveldėti;
Žingsnis po žingsnio animacija gali būti naudojama norint sukurti įdomių efektų, tokių kaip spausdinamas tekstas arba įkėlimo indikatorius.
5. Animacijos pasikartojimas: animacijos iteracijų skaičiaus savybėAnimacijos iteracijų skaičiaus ypatybė nurodo, kiek kartų paleidžiama animacijos ciklas. Pradinė vertė 1 reiškia, kad animacija bus paleista nuo pradžios iki pabaigos vieną kartą. Ši savybė dažnai naudojama kartu su animacijos krypties ypatybės alternatyvia verte, dėl kurios animacija paleidžiama atvirkštine tvarka alternatyviais ciklais.
Turtas nepaveldimas.
Sintaksė
Animacijos iteracijų skaičius: begalinis; animacijos iteracijų skaičius: 3; animacijos iteracijų skaičius: 2,5; animacijos iteracijų skaičius: 2, 0, begalinis;
6. Animacijos kryptis: animacijos krypties savybėAnimacijos krypties ypatybė nustato, ar animacija turi būti leidžiama atvirkštine tvarka kai kuriose ar visose kilpose. Kai animacija leidžiama atvirkštine tvarka, laiko funkcijos taip pat yra atvirkštinės. Pvz., kai žaidžiama atvirkštine tvarka, palengvinimo funkcija elgsis kaip palengvėjimo funkcija.
Turtas nepaveldimas.
| Vertybės: | |
| normalus | Visos animacijos kartojasi, kaip nurodyta. Numatytoji reikšmė. |
| atvirkščiai | Visi animacijos pakartojimai rodomi priešinga kryptimi nei buvo apibrėžta. |
| Alternatyva | Kiekvienas nelyginis animacijos ciklo pakartojimas grojamas įprasta kryptimi, kiekvienas lyginis pakartojimas – atvirkštine kryptimi. |
| alternatyvus-atvirkštinis | Kiekvienas nelyginis animacijos ciklo pakartojimas grojamas atvirkštine kryptimi, kiekvienas lygus pakartojimas – įprasta kryptimi. |
| pradinė | Nustato ypatybės vertę į numatytąją vertę. |
| paveldėti | Paveldi nuosavybės vertę iš pirminio elemento. |
Norint nustatyti, ar animacijos ciklo kartojimas yra lyginis ar nelyginis, pakartojimų skaičius prasideda nuo 1.
Sintaksė
Animacijos kryptis: normali; animacijos kryptis: atvirkštinė; animacija-režisūra: alternatyva; animacijos kryptis: alternate-reverse; animacijos kryptis: normali, atvirkštinė; animacijos kryptis: alternatyvi, atvirkštinė, įprasta; animacija-režisūra: pradinė; animacija-kryptis: paveldėti;
7. Leidžiama animacija: animacijos-žaidimo-būsenos nuosavybėAnimacijos paleidimo būsenos ypatybė nustato, ar animacija bus pradėta, ar pristabdyta. Sustabdyti animaciją cikle galima naudojant šią savybę JavaScript scenarijuje. Animaciją taip pat galite sustabdyti užvedę pelės žymeklį virš objekto - state:hover .
Turtas nepaveldimas.
Sintaksė
Animacijos paleidimo būsena: bėgimas; animacija-play-state: pristabdyta; animacija-play-state: pristabdyta, veikia, veikia; animacija-play-state: pradinis; animacija-play-state: paveldėti;
8. Animacijos delsa: animacijos delsos savybėAnimacijos delsos ypatybė nustato, kada animacija prasidės. Nurodoma sekundėmis s arba milisekundėmis ms.
Turtas nepaveldimas.
Sintaksė
Animacijos uždelsimas: 5s; animacijos delsa: 3s, 10ms;
9. Elemento būsena prieš ir po animacijos paleidimo: animacijos užpildymo režimo savybėAnimacijos užpildymo režimo ypatybė nustato, kokias reikšmes animacija taiko ne jos vykdymo laikui. Kai animacija baigiama, elementas grįžta į pradinį stilių. Pagal numatytuosius nustatymus animacija neturi įtakos ypatybių reikšmėms, kai animacija taikoma elementui - animacijos pavadinimas ir animacijos delsa . Be to, pagal numatytuosius nustatymus animacijos neturi įtakos animacijos trukmės ir animacijos iteracijų skaičiaus ypatybių reikšmėms, kai jos bus baigtos. Animacijos užpildymo režimo ypatybė gali nepaisyti šio elgesio.
Turtas nepaveldimas.
| Vertybės: | |
| nė vienas | Numatytoji reikšmė. Elemento būsena nesikeičia nei prieš, nei po animacijos paleidimo. |
| į priekį | Pasibaigus animacijai (kaip nustatoma pagal animacijos iteracijų skaičiaus vertę), animacijai bus taikomos ypatybių reikšmės tuo metu, kai baigiasi animacija. Jei animacijos iteracijų skaičius yra didesnis nei nulis, taikomos paskutinės baigtos animacijos iteracijos pabaigos vertės (ne tolimesnės iteracijos pradžios vertės). Jei animacijos iteracijų skaičius yra nulis, taikomos reikšmės bus tos, kurios pradeda pirmąją iteraciją (taip pat kaip ir animacijos užpildymo režimu: atgal;). |
| atgal | Per laikotarpį, apibrėžtą su animacijos delsa , animacija taikys ypatybių reikšmes, apibrėžtas pagrindiniame kadre, kuris pradės pirmąją animacijos iteraciją. Tai yra arba nuo pagrindinio kadro reikšmės (kai animacijos kryptis: įprasta arba animacijos kryptis: alternatyvi), arba nuo iki pagrindinio kadro reikšmės (kai animacijos kryptis: atvirkštinė arba animacijos kryptis: alternatyvi). |
| tiek | Leidžia palikti elementą pirmame pagrindiniame kadre prieš prasidedant animacijai (nekreipiant dėmesio į teigiamą delsos reikšmę) ir atidėti paskutiniame kadre iki paskutinės animacijos pabaigos. |
Sintaksė
Animacijos užpildymo režimas: nėra; animacijos užpildymo režimas: pirmyn; animacijos užpildymo režimas: atgal; animacijos užpildymo režimas: abu; animacijos užpildymo režimas: nėra, atgal; animacijos užpildymo režimas: abu, pirmyn, nė vieno;
10. Trumpas animacijos aprašymas: animacijos savybėVisus animacijos atkūrimo parametrus galima sujungti į vieną nuosavybę – animaciją , išvardijant juos atskiriant tarpu:
animacija: animacija-pavadinimas animacija-trukmė animacija-laikas-funkcija animacija-delsimas animacija-iteracija-skaičiuoti animacija-kryptis;
Norėdami paleisti animaciją, pakanka nurodyti tik dvi ypatybes - animacijos pavadinimas ir animacijos trukmė , likusios savybės bus numatytos. Savybių sąrašo tvarka neturi reikšmės, tik animacijos trukmės vykdymo laikas turi būti anksčiau nei animacijos delsos delsa.
11. Kelios animacijosVienam elementui galite nustatyti kelias animacijas, nurodydami jų pavadinimus, atskirdami kableliais:
Div (animacija: šešėlis 1 sek. lengv. 0,5 s pakaitomis, 5 s linijinis judėjimas 2 s;)
| 18.02.2016
CSS3 atveria neribotas galimybes UI dizaineriams, o pagrindinis privalumas yra tai, kad beveik bet kurią idėją galima lengvai įgyvendinti ir įgyvendinti nenaudojant JavaScript.
Nuostabu, kaip paprasti dalykai gali pagyvinti įprastą tinklalapį ir padaryti jį labiau prieinamą vartotojams. Kalbame apie CSS3 perėjimus, su kuriais galite leisti elementui transformuotis ir pakeisti stilių, pavyzdžiui, užvedus pelės žymeklį. Toliau pateikiami devyni CSS3 animacijos pavyzdžiai padės sukurti jautrų jūsų svetainės pojūtį, taip pat pagerinti bendrą puslapio išvaizdą gražiais, sklandžiais perėjimais.
Norėdami gauti išsamesnės informacijos, galite atsisiųsti archyvą su failais.
Visi efektai veikia naudojant perėjimo savybę. perėjimas- „perėjimas“, „transformacija“) ir pseudoklasė:hover, kuri nustato elemento stilių, kai pelės žymeklis užves virš jo (mūsų vadove). Savo pavyzdžiams naudojome 500 x 309 px div, pradinę fono spalvą #6d6d6d ir 0,3 sekundės perėjimo trukmę.
Body > div ( plotis: 500 tšk.; aukštis: 309 piks.; fonas: #6d6d6d; -webkit-transition: viskas 0,3s lengva; -moz-transition: visi 0,3s lengva;; -o-transition: visi 0,3s lengva;; perėjimas: visas 0,3 s lengvas;)
1. Užvesdami pelės žymeklį pakeiskite spalvąKažkada tokio efekto įgyvendinimas buvo gana kruopštus darbas, atliekant tam tikrų RGB reikšmių matematinius skaičiavimus. Dabar pakanka parašyti CSS stilių, kuriame prie parinkiklio reikia pridėti pseudoklasę: užveskite pelės žymeklį ir nustatykite fono spalvą, kuri sklandžiai (per 0,3 sekundės) pakeis pradinę fono spalvą, kai užveskite pelės žymeklį virš bloko:
Spalva: užvedimas (fonas: # 53ea93; )
2. Rėmo išvaizdaĮdomi ir įspūdinga transformacija yra vidinis rėmelis, kuris sklandžiai atsiranda užvedus pelės žymeklį. Puikiai tinka įvairioms sagoms dekoruoti. Norėdami pasiekti šį efektą, naudojame pseudo-class:hover ir box-shadow savybę su įterptuoju parametru (nustato šešėlį elemento viduje). Be to, turėsite nustatyti šešėlio tempimą (mūsų atveju jis yra 23 pikseliai) ir jo spalvą:
Kraštinė: užveskite pelės žymeklį (dėžutės šešėlis: įterpimas 0 0 0 23 piks. #53ea93; )
3. SūpynėsŠi CSS animacija yra išimtis, nes čia nenaudojama perėjimo savybė. Vietoj to mes naudojome:
- @keyframes yra pagrindinė direktyva kuriant kadrą po kadro CSS animaciją, kuri leidžia daryti vadinamuosius. siužetą ir apibūdinkite animaciją kaip pagrindinių punktų sąrašą;
- animation ir animation-iteration-count – animacijos parametrų (trukmė ir greitis) bei ciklų skaičiaus (pakartojimų) nustatymo savybės. Mūsų atveju pakartokite 1.
Išblukimo efektas iš esmės yra paprastas elemento skaidrumo pakeitimas. Animacija kuriama dviem etapais: pirmiausia reikia nustatyti pradinę skaidrumo būseną į 1 – tai yra visišką neskaidrumą, o tada, užvedus pelę, nurodyti jos reikšmę – 0,6:
Išblukti ( neskaidrumas: 1; ) .fade:hover ( neskaidrumas: 0,6; )
Norėdami gauti priešingą rezultatą, pakeiskite reikšmes:
5. DidinimasNorėdami, kad blokas būtų didesnis užvedus pelės žymeklį, naudosime transformavimo ypatybę ir nustatysime ją į mastelį (1.2). Tokiu atveju blokas padidės 20 procentų, išlaikant proporcijas:
Grow:hover ( -webkit-transform: scale (1.2); -ms-transform: scale (1.2); transform: scale (1.2); )
6. SumažinimasSumažinti elementą taip pat lengva, kaip ir padidinti. Jei penktame taške, norėdami padidinti skalę, turėjome nurodyti reikšmę, didesnę nei 1, tai norėdami sumažinti bloką tiesiog nurodysime reikšmę, kuri bus mažesnė už vieną, pavyzdžiui, skalė(0,7) . Dabar, užvedus pelę, blokas proporcingai susitrauks 30 procentų pradinio dydžio:
Shrink:hover ( -webkit-transform: scale (0.7); -ms-transform: scale (0.7); transform: scale (0.7); )
7. Transformacija į ratąViena iš dažniausiai naudojamų animacijų yra stačiakampis elementas, kuris, užvedus pelės žymeklį, virsta apskritimu. Naudojant CSS border-radius ypatybę, naudojamą kartu su :hover and transfer , tai galima pasiekti be problemų:
Apskritimas: užveskite pelės žymeklį (kraštinės spindulys: 70 %; )
8. RotacijaLinksma animacijos parinktis – pasukti elementą tam tikru laipsnių skaičiumi. Norėdami tai padaryti, mums vėl reikės transformavimo ypatybės, bet su kita reikšme - rotateZ(20deg) . Naudojant šiuos parametrus, blokas bus pasuktas 20 laipsnių pagal laikrodžio rodyklę Z ašies atžvilgiu:
Pasukti: užveskite pelės žymeklį ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transformation: rotateZ(20deg); )
9. 3D šešėlisDizainerių nuomonės skiriasi, ar šis efektas tinkamas plokščiam dizainui. Tačiau ši CSS3 animacija yra gana originali ir naudojama internetiniuose puslapiuose. Pasieksime trimatį efektą naudodami jau pažįstamas box-shadow savybes (sukursime daugiasluoksnį šešėlį) ir transformuosime su translateX(-7px) parametru (užtikrinsime horizontalų bloko poslinkį į kairę 7 pikseliais ):
Trys: užvedimas (dėžutės šešėlis: 1 piks. 1 piks. #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 3px 3px #53ea93, 3x #5px 3px 6p -Webkit-transform: translateX( -7px); transformuoti: translateX(-7px); )
Naršyklės palaikymasŠios naršyklės šiuo metu palaiko perėjimo nuosavybę:
| Internet Explorer | Palaikoma IE 10 ir naujesnės versijos |
| Chrome | Palaikoma nuo 26 versijos (iki 25 versija veikia su -webkit- priešdėliu) |
| Firefox | Palaikoma nuo 16 versijos (4–15 versijose ji veikia su priešdėliu -moz-) |
| Opera | Palaikoma nuo 12.1 versijos |
| Safari | Palaikoma nuo 6.1 versijos (3.1–6 versijose veikia su -webkit- priešdėliu) |
Likusias šiuose pavyzdžiuose naudojamas ypatybes, pvz., transform , box-shadow ir kt., taip pat palaiko beveik visos šiuolaikinės naršyklės. Tačiau jei ketinate naudoti šias idėjas savo projektams, primygtinai rekomenduojame dar kartą patikrinti kelių naršyklių suderinamumą.
Tikimės, kad šie CSS3 animacijos pavyzdžiai jums buvo naudingi. Linkime kūrybinės sėkmės!
