Kako uporabljati CSS3 Prehodi in animacije za označevanje sprememb uporabniškega vmesnika

Oblikovalci in umetniki imajo dolgo zgodovino eksperimentiranja z gibanjem, učinki in različnimi vrstami iluzij z namenom, da svojemu delu dodajo dodatno plast. Op art gibanje je začelo z uporabo optičnih iluzij v šestdesetih letih dati vtis gibanja.

Od takrat so se pojavili novejši in novejši pristopi, kot je nedavno popularna kinetična umetnost, ki razširi gledalčevo perspektivo z uporabo večdimenzionalnega gibanja. Gibanje se je pojavilo tudi v računalništvu z izumom prvega utripajočega kurzorja leta 1967.

Elementi DOM v razvoju so bili običajno animirani z JavaScriptom, preden je bil izdan CSS3, in to je metoda, ki še vedno deluje, vendar nove lastnosti, ki jih je uvedel CSS3, nam omogočajo, da izboljšamo naše modele z različnimi učinki in gibanjem na bolj intuitiven način.

Dve glavni tehniki, ki jih ponuja CSS3, sta prehodi in animacije. V tem prispevku si bomo ogledali, kaj so, kakšna je razlika med njimi in kako jih lahko uporabite.

Prehodi

Prehodi in animacije so navajeni vizualizirati spremembe v državi elementa HTML spreminjanje ene ali več svojih lastnosti CSS.

Najpreprostejša oblika vizualizacije spremembe stanja spreminja barvo gumba ali povezave, ko je obrnjena naprej. Ko se to zgodi, dobi element nekoliko drugačen slog, ki ga gledalec običajno opazi, kot da se je nekaj premaknilo na zaslonu.

Spreminjanje lastnosti CSS povezave na hover (ali fokus ali klik) je najstarejša in najenostavnejša oblika prehodov in je obstajala veliko pred obdobjem CSS3.

 a barva: oranžna;  a: hover barva: rdeča;  a: fokus barva: modra;  a: obiskano barva: zelena; 

Prehodi se uporabljajo, ko se element HTML spremeni iz enega vnaprej določenega stanja v drugega. CSS3 je uvedel nove lastnosti, ki omogočajo bolj sofisticirane vizualizacije kot prej, kot so časovne funkcije ali nadzor trajanja.

Nove lastnosti CSS si bomo ogledali v naslednjem razdelku, ko bomo razumeli, kako se animacije razlikujejo. Za zdaj si oglejmo najpomembnejše stvari, ki jih morate vedeti o prehodih.

1. Vedno imajo začetno in končno stanje.
2. Stanja med začetno in končno točko sta implicitno določena v brskalniku, tega pa ne moremo spremeniti s CSS.
3. Zahtevajo eksplicitno sprožanje, kot na primer dodajanje novega psevdoklasa s strani CSS ali nov razred z jQuery.

Spodaj je prikazan čudovit primer pametno uporabljenih prehodov CSS3, v katerih avtor razkrije skrite informacije na način, ki ni vsiljiv, vendar še vedno usmerja pozornost uporabnikov na novo vsebino.

Animacije

Če želimo vizualizirati spremembe stanja z bolj zapletenimi premiki ali če nimamo eksplicitnega sprožilca, npr. če želimo začeti učinek, ko se stran naloži, so animacije pot.

Animacije omogočajo definiranje bolj kompleksne poti z nastavitvijo in konfiguriranjem lastne okvirji. Ključni okvirji so vmesne točke med animacijo, kar nam omogoča, da spreminjamo slog animiranega elementa tolikokrat, kot želimo.

Čeprav CSS3 ponuja odlične načine za izdelavo sofisticiranih animacij, je običajno težje ustvariti jih kot prehodi, zato obstaja veliko odličnih animacijskih knjižnic, ki lahko olajšajo naše delo..

Najpomembnejše stvari, ki jih morate vedeti o animacijah CSS3, so:

1. ne zahtevajo eksplicitnega proženja, lahko se začnejo ob nalaganju strani ali ko se v brskalniku odvija drug dogodek DOM
2. uporabijo se lahko v primerih, ko se uporabljajo prehodi, na primer, ko se doda ali odstrani nov razred ali psevdoklas (čeprav je to manj pogost primer uporabe).
3. zahtevajo, da definiramo nekaj ključnih okvirov (vmesna stanja)
4. določimo lahko število, pogostost in slog teh ključnih slik

V spodnjem primeru si lahko ogledate kul animirani spustni meni. Animacija se začne, ko kliknemo na gumb. To se doseže z dodajanjem dodatnih razredov elementom seznama z jQuery, ko pride do dogodka klikanja.

Ti novi razredi so animirani s podanimi @keyframes pravila v datoteki CSS. Dodatni razredi se odstranijo z jQuery, ko uporabnik naslednjič klikne na gumb in se meni ponovno skrije.

Lastnosti CSS in @keyframes At-Rule

Za prehodi lahko uporabimo bodisi prehod skrajšano lastnost ali 4 posamezne lastnosti, povezane s prehodom: lastnost prehoda, trajanje prehoda, prehodna-časovna funkcija, in zamik prehoda. Lastnost kratice vsebuje vse posamezne lastnosti v skrajšani obliki.

Za animacije je animacija skrajšati lastnost v naših rokah, ki pomeni nič manj kot 8 posameznih lastnosti animacije, namreč ime animacije, trajanje animacije, animacija-timing-funkcija, zakasnitev animacije, animacija-iteracija-count, smer animacije, animacije-fill-mode, in animacija-play-state.

Najpomembnejša stvar pri prehodih in animacijah je, da smo vedno morate določiti lastnosti CSS, ki bodo spremenjene med spremembo stanja. Pri prehodih je videti tako:

 .element ozadje: oranžna; transition-property: ozadje; prehodno trajanje: 3s; prehodna časovna funkcija: enostavnost;  .element: hover ozadje: rdeča; 

Določili smo ozadju premoženja, ker se bo to spremenilo med prehodom.

V enem prehodu lahko spreminjamo več kot eno lastnost CSS, v tem primeru bomo zgoraj opisano kodo spremenili: lastnost prehoda: ozadje, meja;. Lahko uporabimo tudi lastnosti prehoda: vse;, če ne želimo določiti vsakega posameznega premoženja posebej.

Lahko izberemo stenografijo prehod premoženja. Če to storimo, moramo vedno paziti na pravilen vrstni red notranjih lastnosti (glejte skladnjo v dokumentih).

 .element ozadje: oranžna; prehod: enostavnost v ozadju 3s;  .element: hover ozadje: rdeča; 

Če želimo ustvariti animacijo, moramo določiti povezano okvirji. Lastnosti CSS je treba spremeniti v ločeno definiranih @keyframes pravila. Tukaj je primer, kako lahko to storimo:

 .element položaj: relativni; animation-name: slide; trajanje animacije: 3s; funkcija animacije-timing: enostavnost;  @keyframes slide 0% levo: 0;  50% levo: 200px;  100% levo: 400px; 

V zgornjem primeru smo ustvarili zelo preprost drsni učinek. Definirali smo ime animacije, nato je vezal 3 ključne okvire, ki smo jih določili v @keyframes slide … pravila. Odstotki se nanašajo na trajanje animacije, tako da se 50% v primeru 1,5.

Lahko uporabimo stenografijo animacija ali pa bi lahko opredelili ključne okvirje z bolj enostavnimi od do pravilo na naslednji način:

 .element položaj: relativni; animacija: lahkotnost slide 3s;  @keyframes slide from left: 0;  do levo: 400px; 

Ustvarjanje bolj kompleksnih animacij je lastna oblika umetnosti. Če vas zanima, si lahko preberete dve naši vadnici za animacijo o tem, kako ustvariti napredni okvir in kako ustvariti učinek odboja..

Pri gradnji prehodov in animacij morate to vedeti ne morejo biti animirane vse lastnosti CSS, zato je vedno dobro preveriti lastnost, ki jo želite spremeniti v CSS Animatable.

Animacije in prehodi CSS3 so dolgo delovali s predponami prodajalcev, ki jih ne rabimo več uporabljati, vendar pa Mozilla Developer Network še vedno priporoča, da dodate -webkit predpono, saj je podpora za brskalnike, temelječe na Webkitu, pred kratkim dosegla stabilnost.