Kako koristiti CSS3 prijelaze i animacije za isticanje UI promjena

Dizajneri i umjetnici imaju dugu povijest eksperimentiranja s pokretima, efektima i različitim vrstama iluzija s ciljem dodavanja dodatnog sloja u njihov rad. Pokret op arta počeo je koristiti optičke iluzije šezdesetih godina kako bi dao dojam pokreta.

Od tada su se pojavili noviji i noviji pristupi, kao što je nedavno popularna kinetička umjetnost koja proširuje perspektivu gledatelja korištenjem višedimenzionalnog pokreta. Motion se također pojavio u računalnoj znanosti s izumom prvog treptajućeg kursora 1967. godine.

U front-end razvoju DOM elementi su obično animirani JavaScriptom prije nego je CSS3 objavljen, i to je metoda koja i dalje radi, ali nova svojstva uvedena od strane CSS3 omogućuje nam da poboljšamo naše dizajne s različitim učincima i kretanjem na intuitivniji način.

Dvije glavne tehnike koje CSS3 nudi su prijelazi i animacije. U ovom postu ćemo pogledati što su oni, kakva je razlika između njih i kako ih možete iskoristiti.

prijelazi

Prije su se koristili prijelazi i animacije vizualizirati promjene u državi elementa HTML-a od modificiranje jednog ili više svojih CSS svojstava.

Najjednostavniji oblik vizualizacije promjene stanja mijenja boju gumba ili veze kada je uključen. Kada se to dogodi, element dobiva nešto drugačiji stil, koji gledatelj obično uočava kao da se nešto pomaknulo na zaslonu.

Promjena CSS svojstava veze na lebdenju (ili fokusu ili kliku) najstariji je i najjednostavniji oblik prijelaza i postojao je mnogo prije ere CSS3.

 a boja: narančasta;  a: hover boja: crvena;  a: fokus boja: plava;  a: posjećena boja: zelena; 

Prijelazi se koriste kada se HTML element mijenja iz jednog unaprijed definiranog stanja u drugo. CSS3 je uveo nova svojstva koja omogućuju sofisticiranije vizualizacije nego prije, kao što su vremenske funkcije ili kontrola trajanja.

Proučit ćemo nova svojstva CSS-a u sljedećem odjeljku, nakon što shvatimo kako se animacije razlikuju. Za sada ćemo vidjeti najvažnije stvari koje trebate znati o prijelazima.

1. Uvijek imaju početak i kraj.
2. Stanja između početne i završne točke implicitno su definirana preglednikom, to ne možemo promijeniti s CSS-om.
3. Oni zahtijevaju eksplicitno pokretanje, kao što je dodavanje novog pseudoclassa od strane CSS-a ili nove klase jQuery.

U nastavku možete vidjeti prekrasan primjer pametnih upotreba CSS3 prijelaza u kojima autor otkriva skrivene informacije na način koji nije nametljiv, ali i dalje usmjerava korisnike na fokusiranje na novi sadržaj.

Animacije

Ako želimo vizualizirati promjene stanja s složenijim pokretima, ili ako nemamo eksplicitni okidač, npr. ako želimo započeti s učinkom kada se stranica učita, animacije su način na koji treba ići.

Animacije omogućuju definiranje složenijeg puta postavljanjem i konfiguriranjem vlastitog Ključni kadrovi. Ključne sličice su međutočke tijekom animacije, što nam omogućuje da promijenimo stil animiranog elementa onoliko puta koliko želimo.

Iako CSS3 nudi sjajne načine za izgradnju sofisticiranih animacija, obično je teže kreirati ih nego prijelaze, zato postoje mnoge sjajne animacijske knjižnice koje mogu olakšati naš rad.

Najvažnije stvari koje trebate znati o CSS3 animacijama su:

1. ne zahtijevaju eksplicitno pokretanje, mogu početi na učitavanju stranice ili kada se drugi preglednik DOM događa u pregledniku
2. mogu se koristiti u slučajevima kada se koriste prijelazi, primjerice kada se doda ili ukloni nova klasa ili pseudoklas (iako je slučaj manje korišten)
3. zahtijevaju od nas da definiramo neke ključne okvire (srednja stanja)
4. možemo odrediti broj, učestalost i stil tih ključnih kadrova

U donjem primjeru možete vidjeti cool animirani padajući izbornik. Animacija počinje kada kliknemo na gumb. To se postiže dodavanjem dodatnih klasa elementima popisa s jQuery kada se dogodi klik.

Ove nove klase su animirane s navedenim @keyframes pravila u CSS datoteci. Dodatne klase uklanja jQuery kada korisnik sljedeći put klikne na gumb, a izbornik se ponovno sakrije.

Svojstva CSS-a i @keyframes U-Pravila

Za prijelaze možemo koristiti oba tranzicija skraćeno svojstvo ili 4 svojstva vezana uz jednu tranziciju: prijelaznog objekt, prijelaznog trajanje, prijelaznog vremena-funkcije, i prijelaznog kašnjenje. Skraćeno svojstvo sadrži sva pojedinačna svojstva u skraćenom obliku.

Za animacije tu je animacija skraćeno svojstvo u našim rukama koje označava najmanje osam pojedinačnih svojstava animacije, naime animacije-name, animacije-trajanje, animacije-vremena-funkcije, animacija kašnjenja, animacije-iteracija-count, animacije-smjer, animacije-fill-mode, i animacije-play-stanje.

Najvažnija stvar s prelascima i animacijama je da uvijek trebate navesti CSS svojstva koja će biti izmijenjena tijekom promjene stanja. S prijelazima izgleda ovako:

 .element pozadina: narančasta; transition-property: pozadina; trajanje tranzicije: 3s; funkcija prijelaza-vrijeme: olakšavanje;  .element: lebdjenje pozadina: crvena; 

Naveli smo pozadina imovine, jer će se to promijeniti tijekom tranzicije.

U jednom prijelazu možemo izmijeniti više od jednog CSS svojstva, u ovom slučaju gore navedeni kod bi se izmijenio ovako: property-prijelaz: pozadina, granica;. Možemo također koristiti property-prijelaz: sve;, ako ne želimo pojedinačno specificirati svaku nekretninu.

Možemo odabrati skraćenicu tranzicija imovine. Ako to učinimo, uvijek moramo obratiti pozornost na pravilan redoslijed unutarnjih svojstava (pogledajte sintaksu u dokumentima).

 .element pozadina: narančasta; prijelaz: jednostavnost u pozadini 3s;  .element: lebdjenje pozadina: crvena; 

Ako želimo stvoriti animaciju, od nas se traži da navedemo povezano Ključni kadrovi. Svojstva CSS-a potrebno je izmijeniti u zasebno definiranom @keyframes na-pravila. Evo primjera kako to možemo učiniti:

 .element položaj: relativan; animation-name: slajd; trajanje animacije: 3s; animacija-vrijeme-funkcija: jednostavnost-u;  @keyframes slajd 0% lijevo: 0;  50% lijevo: 200px;  100% lijevo: 400px; 

U gornjem primjeru stvorili smo vrlo jednostavan klizni učinak. Definirali smo animacije-name, zatim vezao 3 keyframes na to što smo naveli u @keyframes slide … na-pravila. Postotci se odnose na trajanje animacije, tako da se 50% događa u 1.5.

Možemo koristiti stenografiju animacija također, ili bi mogli definirati ključne okvire s jednostavnijim od do pravilo na sljedeći način:

 .element položaj: relativan; animacija: jednostavnost slajda 3s;  @keyframes slajd from left: 0;  do lijevo: 400px; 

Stvaranje složenijih animacija je njegov vlastiti oblik umjetnosti, ako ste zainteresirani, možete pročitati dva naša vodiča za animaciju o tome kako stvoriti napredni okvir i kako stvoriti efekt odbijanja.

Kada gradite prijelaze i animacije, to morate znati ne mogu se animirati sva svojstva CSS-a, tako da je uvijek dobro provjeriti svojstvo koje želite promijeniti u CSS Animatable.

CSS3 animacije i prijelazi dugo su radili s prefiksima dobavljača, koje više ne moramo koristiti, no Mozilla Developer Network i dalje preporučuje dodavanje -WebKit prefiks za neko vrijeme, jer je podrška za Webkit-temeljene preglednike tek nedavno postigla stabilnost.