Kuidas kasutada CSS3 siirdeid ja animatsioone UI muudatuste esiletõstmiseks

Disainerid ja kunstnikud on pikka aega katsetanud liikumist, efekte ja erinevaid illusioone eesmärgiga lisada oma tööle täiendav kiht. Op art liikumine hakkas kasutama optilisi illusioone 1960ndatel, et anda mulje liikumisest.

Sellest ajast alates on ilmunud uuemad ja uuemad lähenemised, nagu hiljuti populaarne kineetiline kunst, mis laiendab vaataja perspektiivi, kasutades mitmemõõtmelist liikumist. Motion ilmus arvutiteaduses ka esimese vilkumiskursori leiutamisega 1967. aastal.

Esialgse arengu käigus animeerisid DOM-elemendid tavaliselt enne JavaScripti vabastamist JavaScripti ja see toimib ikka veel, kuid CSS3 esitatud uued omadused võimaldavad meil oma disaini täiustada erinevate efektide ja liikumisega intuitiivsemalt.

Kaks peamist tehnikat CSS3 pakub üleminekuid ja animatsioone. Selles postituses vaatleme, mis need on, milline on nende vahe ja kuidas neid kasutada.

Üleminekud

Üleminekud ja animatsioonid on mõlemad harjunud visualiseerida muutusi riigis HTML-elemendi poolt ühe või mitme CSS-i omaduse muutmine.

Lihtsaim vorm riigi muutuse visualiseerimiseks on nupu või lingi värvi muutmine, kui see on hõljuv. Kui see juhtub, saab element veidi erinevast stiilist, mida vaataja tavaliselt täheldab, nagu oleks midagi ekraanil liikunud.

Lingi (või fookuse või klõpsuga) lingi CSS-i omaduste muutmine on üleminekute vanim ja lihtsaim vorm ning see eksisteeris ka enne CSS3 ajastu.

 a värvus: oranž;  a: hover värv: punane;  a: fookus värvus: sinine;  a: külastatud värv: roheline; 

Üleminekuid kasutatakse siis, kui HTML-element muutub ühest eelnevalt määratud olekust teise. CSS3 tutvustas uusi omadusi, mis võimaldavad senisest keerukamaid visualiseerimisi, nagu ajastusfunktsioonid või kestuse kontroll.

Tutvustame uue CSS-i omadusi järgmises osas pärast mõistmist, kuidas animatsioonid erinevad. Praegu vaatame kõige olulisemaid asju, mida peate üleminekute kohta teadma.

1. Neil on alati algus- ja lõppolek.
2. Algus- ja lõpp-punktide vahelised olekud on kaudselt määratletud brauseriga, me ei saa seda muuta CSS-iga.
3. Nad nõuavad selgesõnaline käivitamine, näiteks uue pseudoklaasi lisamine CSS-i poolt või uus klass jQuery poolt.

Näete ilusat näidet nutikalt kasutatavatest CSS3 üleminekutest allpool, kus autor avab peidetud teabe viisil, mis ei ole pealetükkiv, kuid juhib siiski kasutajate tähelepanu uuele sisule.

Animatsioonid

Kui me tahame visualiseerida oleku muutusi keerulisemate liigutustega või kui meil ei ole selget käivitust, nt. kui me tahame alustada efekti, kui leht laadib, on animatsioonid teed.

Animatsioonid võimaldavad määratleda keerulisema tee enda seadistamise ja konfigureerimise teel võtmefailid. Võtmefailid on vahepunktid animatsiooni käigus, mis võimaldab meil animeeritud elemendi stiili muuta nii palju kordi kui soovime.

Kuigi CSS3 pakub suurepäraseid võimalusi keeruliste animatsioonide loomiseks, on tavaliselt raskem neid luua kui üleminekuid, mistõttu seal on palju suurepäraseid animatsiooniraamatuid, mis võivad meie tööd hõlbustada.

Kõige olulisemad asjad, mida CSS3-animatsioonide kohta on vaja teada:

1. nad ei vaja selget käivitamist, nad võivad alustada lehekülje laadimisega või kui brauseris toimub teine ​​DOM-sündmus
2. neid saab kasutada juhtudel, kui kasutatakse üleminekuid, näiteks uue klassi või pseudoklaasi lisamisel või eemaldamisel (kuigi see on harvem kasutusjuhtum)
3. nad nõuavad, et me määrataksime mõned võtmefailid (vahepealsed olekud)
4. saame määrata nende võtmefailide arvu, sageduse ja stiili

Alltoodud näites on näha jahtunud animeeritud rippmenüü. Animatsioon algab nupule vajutamisel. See saavutatakse lisaklasside lisamisega loendielementidele koos jQuery'ga, kui klõpsamise sündmus toimub.

Need uued klassid on animeeritud määratud @keyframes CSS-faili reeglid. Lisaklassid eemaldatakse jQuery poolt, kui kasutaja klõpsab nupul järgmisel korral, ja menüü peidetakse uuesti.

CSS atribuudid ja @keyframes Reegel

Üleminekute jaoks on võimalik kasutada kas üleminek stenogrammi vara või 4 üksiku üleminekuga seotud omadust: ülemineku-vara, üleminekuaeg, ülemineku-ajastuse funktsioon, ja ülemineku viivitus. Lühikirjeldusomand sisaldab kõiki üksikuid omadusi lühendatud kujul.

Animatsioonide jaoks on olemas animatsioon stenogramm vara meie kätes, mis tähistab mitte vähem kui 8 ühe animatsiooni omadust, nimelt animatsiooni nimi, animatsiooni kestus, animatsiooni-ajastuse funktsioon, animatsiooni viivitus, animatsiooni-iteratsiooni arv, animatsioon-suund, animatsioon-täitmisrežiim, ja animatsioon-play-olek.

Kõige olulisem asi nii üleminekute kui animatsioonide puhul on see, et me alati peate täpsustama CSS-i omadused, mida olekumuutuse ajal muudetakse. Üleminekutega näeb välja selline:

 .element taust: oranž; ülemineku-omadus: taust; ülemineku kestus: 3s; ülemineku-ajastamise funktsioon: lihtsus;  .element: hover taust: punane; 

Me täpsustasime taustal vara, sest see on see, mida ülemineku ajal muudetakse.

Ühe ülemineku jooksul saame muuta rohkem kui ühte CSS-i omadust, sellisel juhul muudetakse ülaltoodud koodi järgmiselt: ülemineku-vara: taust, piir;. Saame kasutada ka ülemineku-vara: kõik;, kui me ei soovi iga vara eraldi määrata.

Me saame valida stenogrammi üleminek vara. Kui me seda teeme, peame alati pöörama tähelepanu sisemiste omaduste korrektsele järjestusele (vt süntaksi dokumentides).

 .element taust: oranž; üleminek: tausta 3s lihtsus;  .element: hover taust: punane; 

Kui soovime luua animatsiooni, on meil vaja sellega seotud võtmefailid. CSS-i omadusi tuleb muuta eraldi määratletud kujul @keyframes reeglid. Siin on näide sellest, kuidas me saame seda teha:

 .element positsioon: suhteline; animatsioon-nimi: slaid; animatsioon-kestus: 3s; animatsioon-ajastus-funktsioon: lihtsus;  @keyframes slide 0% vasakul: 0;  50% vasakul: 200 px;  100% vasakul: 400px; 

Ülaltoodud näites oleme loonud väga lihtsa libistava efekti. Me määratlesime animatsiooni nimi, siis sidus sellega 3 võtmefaili, mille me täpsustasime @keyframes slide … reeglid. Protsendid viitavad animatsiooni kestusele, nii et 50% juhtub näite 1.5-s.

Me võiksime kasutada stenogrammi animatsioon samuti võib see lihtsamate võtmefailide määratlemiseks alates kuni otsustama järgmisel viisil:

 .element positsioon: suhteline; animatsioon: slaidide 3 lihtsus;  @keyframes slide vasakult: 0;  vasakule: 400px; 

Keerulisemate animatsioonide loomine on oma kunstivorm, kui olete huvitatud, saate lugeda kahte meie animatsiooniõpetusest, kuidas luua täiustatud telki ja kuidas luua põrgatavat efekti.

Üleminekute ja animatsioonide ehitamisel peate seda teadma kõiki CSS-i omadusi ei saa animeerida, seega on alati hea mõte CSS Animatable'is vaadata kinnisvara, mida soovite muuta.

CSS3 animatsioonid ja üleminekud töötasid koos tarnija eesliidetega juba pikka aega, mida me ei pea enam kasutama, kuid Mozilla Developer Network soovitab siiski lisada -webkit eesliide mõnda aega, kuna Webkit-põhiste brauserite tugi saavutas hiljuti stabiilsuse.