Ako používať prechody a animácie CSS3 na zvýraznenie zmien používateľského rozhrania

Dizajnéri a umelci majú dlhú históriu experimentovania s pohybom, účinkami a rôznymi druhmi ilúzií s cieľom pridať do svojej práce ďalšiu vrstvu. Operačné hnutie op začalo používať optické ilúzie v šesťdesiatych rokoch minulého storočia, aby vytvorilo dojem pohybu.

Odvtedy sa objavili novšie a novšie prístupy, napríklad nedávno populárne kinetické umenie, ktoré rozširuje perspektívu diváka pomocou multidimenzionálneho pohybu. Pohyb sa objavil aj v informatike s vynálezom prvého blikajúceho kurzora v roku 1967.

Pri vývoji front-end boli prvky DOM zvyčajne animované skriptom JavaScript predtým, než bol CSS3 prepustený, a je to metóda, ktorá stále funguje, ale nové vlastnosti zavedené v systéme CSS3 nám umožňujú vylepšiť naše návrhy s rôznymi účinkami a pohybom intuitívnejším spôsobom.

Dve hlavné techniky CSS3 ponúkajú prechody a animácie. V tomto príspevku sa pozrieme na to, čo sú, aký je rozdiel medzi nimi a ako ich môžete využiť.

prechody

Transitions a animácie sú oba zvyknutí vizualizovať zmeny v stave prvku HTML pomocou modifikácia jednej alebo viacerých vlastností CSS.

Najjednoduchšia forma vizualizácie zmeny stavu mení farbu tlačidla alebo odkazu, keď sa vznáša. Keď sa to stane, prvok dostane trochu iný štýl, ktorý si zvyčajne všimne divák, ako keby sa niečo presunulo na obrazovku.

Zmena vlastností CSS odkazu na vznášanie (alebo zaostrovanie alebo kliknutie) je najstaršia a najjednoduchšia forma prechodov a existovala ešte pred obdobím CSS3.

 a farba: oranžová;  a: vznášať sa farba: červená;  a: zaostrenie farba: modrá;  a: navštívené farba: zelená; 

Prechody sa používajú, ak sa element HTML zmení z jedného vopred definovaného stavu na druhý. CSS3 predstavil nové vlastnosti, ktoré umožňujú sofistikovanejšiu vizualizáciu ako predtým, ako sú časové funkcie alebo riadenie trvania.

Pozrite sa na nové vlastnosti služby CSS v nasledujúcej sekcii, po pochopení toho, ako sa líšia animácie. Zatiaľ uvidíme najdôležitejšie veci, ktoré potrebujete vedieť o prechode.

1. Majú vždy začiatok a koniec.
2. Štáty medzi začiatočným a koncovým bodom sú implicitne definované prehliadačom, nemôžeme to zmeniť pomocou CSS.
3. Vyžadujú to explicitné spúšťanie, ako napríklad pridanie nového pseudoklasu CSS alebo novú triedu podľa jQuery.

Môžete vidieť krásny príklad inteligentne využívaných prechodov CSS3 nižšie, v ktorých autor odhaľuje skryté informácie spôsobom, ktorý nie je rušivý, ale stále núti používateľov zamerať sa na nový obsah.

animácie

Ak chceme vizualizovať zmeny stavu s komplikovanějšími pohybmi, alebo ak nemáme explicitný spúšť, napr. ak chceme spustiť efekt pri načítaní stránky, animácie sú spôsoby, ako ísť.

Animácie umožňujú definovať zložitú cestu nastavením a konfiguráciou vlastných keyframes. kľúčové snímky sú priebežnými bodmi v priebehu animácie, čo nám umožňuje zmeniť štýl animovaného prvku toľkokrát, koľkokrát chceme.

Napriek tomu, že CSS3 ponúka skvelé spôsoby na vytváranie sofistikovaných animácií, zvyčajne je ťažšie ich vytvárať než prechody, preto je tu veľa skvelých animačných knižníc, ktoré môžu uľahčiť našu prácu.

Najdôležitejšie veci, ktoré potrebujete vedieť o animáciách CSS3, sú:

1. nepotrebujú explicitné spúšťanie, môžu začať s načítaním stránky alebo keď sa v prehliadači uskutoční iná udalosť DOM
2. môžu sa použiť v prípadoch, keď sa používajú prechody, napríklad keď sa pridá alebo odstráni nová trieda alebo pseudoklas (aj keď je to menej častý prípad použitia)
3. vyžadujú definovanie niektorých kľúčových snímok (prechodné stavy)
4. môžeme určiť číslo, frekvenciu a štýl týchto kľúčových snímok

V nižšie uvedenom príklade vidíte rozvinuté rozvinuté animované menu. Animácia sa spustí po kliknutí na tlačidlo. To sa dosiahne pridaním dodatočných tried do prvkov zoznamu s jQuery, keď nastane udalosť kliknutia.

Tieto nové triedy sú animované so špecifikovanými @keyframes pravidiel v súbore CSS. Extra triedy sú odstránené pomocou jQuery, keď používateľ klepne na tlačidlo nabudúce a ponuka sa znovu skryje.

CSS Vlastnosti a @keyframes At-pravidlá

Pre prechody môžeme použiť buď prechod vlastnosť skratky alebo 4 jednorazové vlastnosti súvisiace s prechodom: prechod-vlastnosť, prechod-trvanie, prechodového časovanie-funkcie, a prechod meškanie. Vlastnosť skratky obsahuje všetky jednotlivé vlastnosti v skrátenej forme.

Pre animácie je to animácie vlastnosť s krátkym rukávom v našich rukách, ktorá znamená nie menej ako 8 jednoduchých animačných vlastností, menovite animácie-name, animácie-trvanie, animácie-časovanie-funkcie, animácie-delay, animácie-iterácie-count, animácie smeru, animácie-fill-mode, a animácie-play-state.

Najdôležitejšia vec s prechodmi a animáciami je to, že sme vždy je potrebné špecifikovať vlastnosti CSS, ktoré budú zmenené počas zmeny stavu. S prechodmi to vyzerá takto:

 .prvok pozadie: oranžový; transition-property: background; prechod-trvanie: 3s; prechod-časovanie-funkcia: jednoduchosť; . element: vznášadlo background: červená; 

Zadali sme pozadie majetok, pretože to je to, čo sa počas prechodu zmení.

Môžeme zmeniť viac ako jednu vlastnosť CSS v jednom prechode, v tomto prípade by bol vyššie uvedený kód upravený takto: prechod-vlastnosť: pozadie, okraj;. Môžeme tiež použiť prechod-vlastnosť: všetky;, ak nechceme špecifikovať každú vlastnosť samostatne.

Môžeme si vybrať skratku prechod nehnuteľnosť. Ak tak urobíme, vždy musíme venovať pozornosť správnemu poriadku vnútorných vlastností (pozri syntax v dokumentoch).

 .prvok pozadie: oranžový; prechod: pozadie 3s easy-in; . element: vznášadlo background: červená; 

Ak chceme vytvoriť animáciu, musíme špecifikovať súvisiace keyframes. Vlastnosti CSS je potrebné upraviť v samostatne definovaných @keyframes at-pravidlá. Tu je príklad toho, ako to môžeme urobiť:

 .element pozícia: relatívna; názov animácie: snímka; trvanie animácie: 3s; animácia-časovanie: ľahká inštalácia;  @keyframes slide 0% vľavo: 0;  50% left: 200px;  100% vľavo: 400 pixlov; 

V príklade vyššie sme vytvorili veľmi jednoduchý posuvný efekt. Definovali sme animácie-name, potom na ňu viazané 3 kľúčové snímky, ktoré sme špecifikovali v @keyframes slide ... at-pravidlá. Percento sa vzťahuje na trvanie animácie, takže 50% sa v tomto príklade vyskytuje na 1,5s.

Mohli by sme použiť skratku animácie vlastnosť, alebo môžete definovať kľúčové snímky jednoduchším spôsobom od do pravidlo takto:

 .element pozícia: relatívna; animácia: snímka 3s easy-in;  @keyframes slide z left: 0;  na left: 400px; 

Vytvorenie zložitejších animácií je vlastnou formou umenia, ak máte záujem, môžete si prečítať dva z našich animačných tutoriálov o tom, ako vytvoriť pokročilý markýz a ako vytvoriť efekt odrazu.

Pri budovaní prechodov a animácií musíte to vedieť nie všetky vlastnosti služby CSS môžu byť animované, takže je vždy dobré skontrolovať vlastnosť, ktorú chcete zmeniť v programe CSS Animatable.

Animácie a prechody CSS3 pracujú dlhú dobu s predponami predajcov, ktoré už nemusíte používať, avšak sieť Mozilla Developer Network ešte odporúča pridať -WebKit prefix na chvíľu, pretože podpora pre prehliadače založené na Webkit len ​​nedávno dosiahla stabilitu.