Kaip tinkamai panaudoti CSS3 animacijas: vadovėlis, pavyzdžių kodai ir pavyzdžiai

Kai mes naudojame JS ir jQuery, mes visiškai kontroliuojame animaciją ir galime sukurti nuostabius efektus, tačiau kaina yra gana aukšta. Apdorojimo laikas, kelių naršyklių suderinamumas (pavyzdžiui, mobilieji įrenginiai yra gana skirtingi, kai kalbama apie JS), o pats kodo sudėtingumas yra taškai, kuriuos turėtume atsiminti kurdami animacines sąsajas.


Taigi, šiandien pamatysime, kaip išvengti JS naudojant CSS animacijas ir perėjimus. Aptarsime nuo pačių pagrindinių žingsnių iki nuostabių efektų, tokių kaip akordeono plokštės ir animuoti antriniai meniu.

Paimkite sėdynę, užrašų knygelę ir tikrą naršyklę (bet ką, išskyrus IE) ir pradėkime.

Apšilimas

Naudodamiesi CSS animacija, turime nemažai pranašumų (ir trūkumų, kaip ir viskas mūsų gyvenime). Jei jums reikia parduoti juos savo viršininkui ar klientui, tai turėtumėte atsiminti:

  • Jie gali būti greitesni, nes gali naudoti aparatūros pagreitį (kaip HTML5 diegimai)
  • Jie geriau veiks mobiliuosiuose įrenginiuose ir jiems nereikės specialaus kodo, kad būtų galima stebėti įvykius liečiant
  • JS turi išaiškinti naršyklė, o galimybės nutraukti naršyklę yra daug didesnės. Taigi, kai CSS nepavyksta, jis tyliai žlunga, o JS gali sugadinti visą puslapį
  • Jie turi gana gerą naršyklės palaikymą (ši svetainė padės jums patikrinti konkrečią statistiką apie tai: http://caniuse.com/#search)

CSS3 animacijos pavyzdžiai

Prieš pradėdami nuo šio įrašo mėsos, pažiūrėkime į keletą gražių animacijų, padarytų gryname CSS.

Grynas CSS „Twitter Fail Whale“

Animacinis nepavykęs banginis

 Sukūrė Stevenas Dennisas, pamatykite tai veiksme.

Grynas CSS ritininis koksas
CSS 3 animacijos pavyzdžiai: slinkties kokso skardinė

Sukūrė Romas Kortesas, žiūrėkite tai į veiksmą.

Grynas CSS vaikščiojantis vyras

CSS 3 animacijos pavyzdžiai: vaikščiojantis vyras

 Sukūrė Andrew Hoyeris, pamatykite tai veiksme.

Nešvarios rankos

Pradėkime kodą. Animacijai suaktyvinti naudosime daug CSS pseudo klasių. Tiesą sakant, daugelis kūrėjų rekomenduoja naudoti JS, kad suaktyvintumėte ir išaktyvintumėte animaciją, tačiau čia pamatysime lengvesnį būdą:

#test {
fonas: raudonas;
}
#testas: užveskite pelę {
fonas: žalia;
}
#testas: aktyvus {
fonas: mėlynas;
}
#test: target {
fonas: juodas;
}

Turime keletą kitų pseudo klasių, kurias turite naudoti, bet jūs turite idėją! Taigi, kas nutinka spustelėjus elementą #test (darant prielaidą, kad tai nuoroda):

  • Normali būsena: fonas bus raudonas
  • Užveskite pelės žymeklį: kai pelė pateks į elemento sritį, jos fonas bus žalias
  • Aktyvus: spustelėjus ant jo žymeklį ir vis dar paspaudžiant pelės mygtuką, fono spalva bus mėlyna
  • Tikslas: Kai dabartinio puslapio URL adresas yra #, šis elementas bus juodas

Kiekvienas iš jų gali būti naudojamas CSS animacijai, pavyzdžiui, galite sukurti 2 nuorodas, kad CSS animacija būtų įjungta ir išjungta, naudojant tikslinį pseudo elementą su šiuo kodu:

aktyvuoti
išjungti

CSS perėjimai

CSS perėjimas nuo pradinės iki galutinės būsenos vyks sklandžiai. Taigi naudodamiesi „perėjimo“ ypatybe pagrindiniame parinkiklyje jūs nustatysite laiką ir kiekvieną ypatybę, kuri bus paveikta, ir kaip turėtų būti animacija. Pažiūrėkime pavyzdį:

.testas {
/ * pereinamojo laikotarpio trukmės laiko funkcija, * /
spalva: mėlyna;
perėjimas: 2s spalva, 2s šrifto dydis palengvina;
}
.testas: užveskite pelę {
spalva: raudona;
}
.testas: aktyvus {
šrifto dydis: 200%;
}

Kai užvesite „.test“ elementą, pamažu spalva pasikeis nuo mėlynos iki raudonos (kokia graži paletė, ar ne?). Spustelėjus elementą, šrifto dydis palaipsniui padidės iki 200% numatytojo šrifto dydžio.

Mes taip pat turime „perėjimo laiko nustatymo“ ypatybę, nustatytą palengvinant, kad bus praleistas „animacijai“ skirtas laikas. Čia yra galimos vertės:

  • Linijinis: vienodas greitis nuo pradžios iki galo
  • Paprastumas: lėtas startas
  • Lengvumas: lėtas galas
  • Lengva: lėtai pradėkite, greitai viduryje, tada lėtai
  • Lengvas įjungimas: lėtas startas, lėtas galas
  • Kubinis bežeris (a, b, c, d): pasirinktinis greitis

Kubinė „Bezier“ funkcija sukurs pasirinktinę animaciją su 4 skaičiais, kurie svyruoja nuo 0 iki 1, ir tai atspindi animacijos greičio X trukmės matematinę kreivę..

Norėdami geriau suderinti naršyklę, turėtumėte apsvarstyti galimybę naudoti pardavėjo priešdėlius, skirtus operai, „Firefox“ ir tokiems tinklalapiams:

div {
plotis: 400 pikselių;
-o perėjimas: plotis 2s;
-moz-perėjimas: plotis 2s;
-webkito perėjimas: plotis 2s;
perėjimas: plotis 2s;
}

Be to, naudodamiesi žiniasklaidos užklausomis, galite apibrėžti skirtingus perėjimus, atsižvelgiant į naršyklės plotį (mobilieji įrenginiai, planšetiniai kompiuteriai). Tai yra paprastas pavyzdys:

kūnas {
šrifto dydis: 1em;
}
@media ekranas ir (maksimalus plotis: 800 pikselių) {
kūnas {
šrifto dydis: 0.8em;
}
}
@media ekranas ir (maksimalus plotis: 400 pikselių) {
kūnas {
Šrifto dydis: 0,7em;
}
}

Padidinus naršyklės plotį, šrifto dydis staiga pasikeis. Šis kodas užkirs kelią tokiam įvykiui, suteikdamas daug sklandesnį perėjimą:

kūnas {
-o perėjimas: šrifto dydis .5 linijinis;
-„moz“ perėjimas: šrifto dydis .5 linijinis;
-interneto rinkinio perėjimas: šrifto dydis .5 linijinis;
perėjimas: šrifto dydis .5 linijinis;
}

Tai taip pat galėtumėte naudoti, jei turite skirtingus rodmenis ar dydžius portretui / kraštovaizdžiui, jei norite pakeisti plotį, spalvas, paminkštinimus, meniu ekraną..

CSS animacija – prasideda tikroji linksmybė

Animacija yra perėjimų seka, apibrėžta vienu pasirinkikliu. Norėdami apibrėžti CSS animacijas, turėsite atlikti 2 veiksmus.

„@Keyframe“ taisyklė naudojama apibrėžti animacijos žingsnių seką, ją apibūdina unikalus pavadinimas ir stiliai, apibūdinantys, kaip ši animacija veikia. Kaip įprasta, mums reikės keleto prefiksų tiekėjų, kaip šiame pavyzdyje:

/ * tas pats kodas kiekvienam pardavėjui * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * animacijos pavadinimas * /
@keyframe mano animacija {
/ * kadro parinkiklis * /
0% {
/ * rėmelio stilius * /
Kairė: 0 taškų;
Viršuje: 0 taškų;
}
25% {
Kairėje: 200 taškų;
Viršuje: 0 taškų;
}
50% {
Kairėje: 200 taškų;
Viršuje: 200 pikselių;
}
75% {
Kairė: 0 taškų;
Viršuje: 200 pikselių;
}
100% {
Kairė: 0 taškų;
Viršuje: 0 taškų;
}
}

Taigi, kiekvienas stilius apibrėžiamas kaip rėmelis / laikotarpis (kaip ir tie kadrai iš „Flash“ animacijos) procentais ir stiliai, kurie turėtų būti ten taikomi. Pvz., Šiame pagrindiniame kadre teigiama, kad elementas judės į kairę, tada į viršų, tada į dešinę, tada į apačią.

Atlikę 1 veiksmą ir sukūrę pagrindinį kadrą, galėsite jį faktiškai pritaikyti elementui. Tada mes naudosimės beveik ta pačia logika, kaip ir CSS perėjimo atveju, skirtumas yra tas, kad dabar mūsų „perėjimas“ yra daug sudėtingesnė animacija..

Norėdami jį pritaikyti, naudosime animacijos nuosavybę ir ji turi 7 antrines ypatybes:

  • Vardas: unikalus identifikatorius
  • Trukmė: kiek laiko užtruks nuo 0% iki 100%
  • Laiko nustatymo funkcija: beveik tokia pati kaip perėjimo laiko nustatymo funkcija
  • Vėlavimas: kiek laiko užtruks 0% pradžios
  • Iteracijos skaičius: kiek pasikartojimų turėsime („begalinis“ begalinei kilpai)
  • Kryptis: normali arba pakaitinė (atvirkštinė)
  • „Play-state“: jei animacija veikia arba pristabdyta

Tai pritaikys mūsų animaciją elementui #test, kai jis bus nukreiptas į puslapį:

#test: target {
/ * animacija-vardas | trukmė | laiko funkcija | vėlavimas | iteracijos skaičius | kryptis | žaidimo būsena * /
animacija: mano animacija 10s linijinis 0s begalinis normalus bėgimas;
}

Turėdami tai omenyje, galime sukurti keletą nuostabių pavyzdžių.

Tik CSS akordeonas

Mes sukursime sulankstomas plokštes naudodami CSS animaciją. Čia yra pagrindinė HTML struktūra:

1 skirtukas

1 TEKSTAS

2 skirtukas

2 TEKSTAS

3 skirtukas

3 TEKSTAS

Tai tiesiog sukurs skydelius ir saitą, kuris suaktyvins kiekvieną iš jų. Ir štai, kur atsitinka magija:

/ * bet kokia divizija, esanti akordeono viduje * /
.akordeono div {
/ * pagal nutylėjimą yra paslėptas * /
aukštis: 0;
perteklius paslėptas;
/ * juodoji magija * /
perėjimas: aukštis 1s;
}
/ * kai minėtas div yra taikinys * /
.akordeono div: taikinys {
/ * aukštis: automatinis neveiks, bet veiks gerai * /
aukštis: 80 taškų;
}

Gana paprasta, ar ne? Ir jūs visą savo gyvenimą praleidote naudodamiesi JS tam? 🙂

Tik CSS meniu su submeniu

Tai yra dar viena gana paprasta programa. Jūs tikrai turite savo naršymo meniu savo svetainėje, ir dažnai mums ten reikia naudoti keletą submeniu. Geriausias būdas parodyti ir paslėpti elementus yra „jQuery“, tiesa? Na, pagalvok dar kartą, išbandęs šį kodą:

  • 1 punktas
    • 1.1 punktas
    • 1.2 punktas
  • 2 punktas
    • 2.1 punktas
    • 2.2 punktas

Ir burtai prasideda čia:

a {
/ * tiesiog padarai nuorodas geresnes * /
rodymas: blokas;
paminkštinimas: 4px;
}
nav {
suderinti tekstą: centre;
}
/ * bet koks meniu (įskaitant pagrindinį) * /
nav ul {
ekranas: intarpas;
sąrašo stilius: nėra;
}
nav>ul>li {
/ * horizontalūs elementai (vertikali taip pat veiks gerai) * /
plūdė: kairė;
}
nav li div {
/ * sutraukiantis bet kurį antrinį meniu * /
aukštis: 0;
perteklius paslėptas;
/ * Houdini jausmai * /
perėjimas: aukštis 1s;
}
nav li: užveskite>div {
aukštis: 56px;
}

Apibendrinant

Tai tikrai yra tik pradžios vadovas. Yra daugybė kitų nuostabių efektų, kuriuos galima padaryti naudojant tik CSS animacijas, ir dar daug dalykų, kurie dar tik dar nėra padaryti.

Taigi, ar jūs anksčiau tai naudojote? Ar galite sugalvoti dar vieną gerą CSS animacijos programą? Pasidalykite savo mintimis naudodamiesi komentarais!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me