CSS3-siirtymien ja animaatioiden käyttäminen korostamaan käyttöliittymän muutoksia

Suunnittelijoilla ja taiteilijoilla on pitkä historia kokeilemalla liikkeitä, vaikutuksia ja erilaisia ​​illuusioita, joiden tarkoituksena on lisätä ylimääräinen kerros heidän työhönsä. Op art -liike alkoi käyttää optisia illuusioita 1960-luvulla liikkeen vaikutelman aikaansaamiseksi.

Siitä lähtien uudemmat ja uudemmat lähestymistavat ovat nousseet, kuten hiljattain suosittu kineettinen taide, joka laajentaa katsojan näkökulmaa käyttämällä moniulotteista liikettä. Motion ilmestyi myös tietojenkäsittelytieteessä ensimmäisen vilkkuvan kohdistimen keksimisellä vuonna 1967.

Etupään kehitystyössä DOM-elementit animoivat yleensä JavaScriptin ennen CSS3: n julkaisemista, ja se toimii edelleen, mutta CSS3: n esittelemät uudet ominaisuudet antavat meille mahdollisuuden parantaa malleja eri vaikutuksilla ja liikkeellä intuitiivisemmin.

CSS3: n kaksi tärkeintä tekniikkaa ovat siirtymät ja animaatiot. Tässä viestissä tarkastelemme, mitä ne ovat, mikä ero niiden välillä ja miten voit käyttää niitä.

siirtymät

Siirtymiä ja animaatioita käytetään molemmat visualisoida muutoksia valtiossa HTML-elementin yhden tai useamman sen CSS-ominaisuuden muuttamisesta.

Yksinkertaisin tilamuutoksen visualisointi on painikkeen tai linkin värin muuttaminen, kun se on lepotilassa. Kun se tapahtuu, elementti saa hieman erilaisen tyylin, jonka katsoja havaitsee yleensä ikään kuin jotain olisi siirtynyt näytöllä.

Linkin CSS-ominaisuuksien muuttaminen hover (tai focus tai click) on vanhin ja yksinkertaisin siirtymämuoto, ja se oli olemassa jo ennen CSS3-aikakautta.

 a väri: oranssi;  a: hover väri: punainen;  a: tarkennus väri: sininen;  a: vieraili väri: vihreä; 

Siirtymiä käytetään, kun HTML-elementti muuttuu ennalta määritetystä tilasta toiseen. CSS3 esitteli uusia ominaisuuksia, jotka mahdollistavat entistä kehittyneempiä visualisointeja, kuten ajoitusfunktioita tai kestonohjausta.

Katsomme seuraavassa osassa olevia uusia CSS-ominaisuuksia, kun ymmärrämme, miten animaatiot eroavat toisistaan. Katsokaa nyt tärkeimpiä asioita, joita sinun tarvitsee tietää siirtymisistä.

1. Heillä on aina alku- ja lopputila.
2. Aloitus- ja loppupisteiden väliset tilat määrittelevät implisiittisesti selaimen, emme voi muuttaa sitä CSS: n kanssa.
3. Ne vaativat selkeä laukaisu, kuten uuden pseudoklassin lisääminen CSS: llä tai uusi luokka jQueryn avulla.

Näet kauniita esimerkkejä älykkäästi hyödynnetyistä CSS3-siirtymistä alla, jossa kirjoittaja paljastaa piilotetut tiedot tavalla, joka ei ole häiritsevä, mutta ohjaa käyttäjien keskittymistä uuteen sisältöön.

animaatiot

Jos haluamme visualisoida tilamuutoksia monimutkaisemmilla liikkeillä tai jos meillä ei ole nimenomaista laukaisinta, esim. jos haluamme aloittaa vaikutuksen, kun sivu latautuu, animaatiot ovat tapa edetä.

Animaatiot mahdollistavat monimutkaisemman polun määrittämisen asettamalla ja määrittämällä oman avainkehyksiä. avainkehyksiä ovat välikohdia animaation aikana, jonka avulla voimme muuttaa animoidun elementin tyyliä niin monta kertaa kuin haluamme.

Vaikka CSS3 tarjoaa erinomaisia ​​tapoja rakentaa hienostuneita animaatioita, on yleensä vaikeampaa luoda niitä kuin siirtymiä, siksi siellä on monia loistavia animaatiokirjastoja, jotka voivat helpottaa työtäsi.

Tärkeimmät asiat, jotka sinun on tiedettävä CSS3-animaatioista, ovat seuraavat:

1. ne eivät vaadi nimenomaista laukaisua, ne voivat alkaa sivun latauksessa tai kun toinen DOM-tapahtuma tapahtuu selaimessa
2. niitä voidaan käyttää tapauksissa, joissa käytetään siirtymiä, esimerkiksi kun lisätään tai poistetaan uusi luokka tai pseudoklassikko (vaikka se on harvinaisempi käyttötapa)
3. ne vaativat meitä määrittelemään joitakin avainruutuja (välitilat)
4. voimme määrittää näiden näppäinkehysten numeron, taajuuden ja tyylin

Alla olevassa esimerkissä näkyy viileä animoitu avattavasta valikosta. Animaatio alkaa, kun napsautamme painiketta. Tämä saavutetaan lisäämällä lisäluokkia jQuery-luettelon elementteihin, kun napsautustapahtuma tapahtuu.

Nämä uudet luokat animoidaan määritellyllä tavalla @keyframes CSS-tiedoston säännöt. JQuery poistaa ylimääräiset luokat, kun käyttäjä napsauttaa painiketta seuraavan kerran, ja valikko piilotetaan uudelleen.

CSS-ominaisuudet ja @keyframes At-sääntö

Siirtymien osalta voimme käyttää joko siirtyminen lyhytominaisuus tai 4 yksittäistä siirtymiseen liittyvää ominaisuutta: siirtyminen-ominaisuus, siirtyminen-kesto, siirtyminen-ajoitus-toiminto, ja siirtyminen-viive. Pikaominaisuus sisältää kaikki yksittäiset ominaisuudet lyhennetyssä muodossa.

Animaatioita varten on animaatio lyhytaikaista omaisuutta käsissämme, joka tarkoittaa yhtä kuin 8 yksittäistä animaatiota, nimittäin animaatio-nimi, animaatio-kesto, animaatio-ajoitus-toiminto, animaatio-viive, animaatio-iterointi-count, animaatio-suunnassa, animaatio-fill-mode, ja animaatio-play-tilassa.

Sekä siirtymien että animaatioiden tärkein asia on se, että olemme aina on määritettävä CSS-ominaisuudet, joita muutetaan tilanvaihdon aikana. Siirtymillä se näyttää tältä:

 .elementti tausta: oranssi; siirtymä-omaisuus: tausta; siirtymäaika: 3s; siirtymävaihe-toiminto: helppous;  .elementti: hover tausta: punainen; 

Määrittelimme tausta omaisuus, koska tämä muuttuu siirtymän aikana.

Yhdessä siirtymässä voimme muuttaa useampaa kuin yhtä CSS-ominaisuutta, jolloin yllä olevaa koodia muutetaan seuraavasti: siirtymä-omaisuus: tausta, raja;. Voimme myös käyttää siirtymä-omaisuus: kaikki;, jos emme halua määrittää kullekin omaisuudelle erikseen.

Voimme valita lyhenteen siirtyminen omaisuutta. Jos teemme niin, meidän on aina kiinnitettävä huomiota sisäisten ominaisuuksien oikeaan järjestykseen (katso syntaksi asiakirjoissa).

 .elementti tausta: oranssi; siirtymä: taustan 3s helpotus;  .elementti: hover tausta: punainen; 

Jos haluamme luoda animaation, meidän on määritettävä liittyvä avainkehyksiä. CSS-ominaisuudet on muutettava erikseen määriteltyinä @keyframes at-sääntöjä. Tässä on esimerkki siitä, miten voimme tehdä tämän:

 .elementti sijainti: suhteellinen; animaatio-nimi: dia; animaatio-kesto: 3s; animaatio-ajoitus-toiminto: helppous;  @keyframes slide 0% left: 0;  50% vasen: 200px;  100% vasen: 400px; 

Yllä olevassa esimerkissä luotiin hyvin yksinkertainen liukuva vaikutus. Määritimme animaatio-nimi, sitten sidottiin siihen 3 avainruutua, jotka me määritelimme @keyframes slide … at-sääntöjä. Prosenttiosuudet viittaavat animaation kestoon, joten 50% tapahtuu esimerkissä 1.5s.

Voisimme käyttää lyhennettä animaatio omaisuutta, tai voisi määritellä avainrungot yksinkertaisemmalla tavalla alkaen - säännellä seuraavalla tavalla:

 .elementti sijainti: suhteellinen; animaatio: liukumäki 3s;  @keyframes slide vasemmalta: 0;  vasemmalle: 400px; 

Monimutkaisempien animaatioiden luominen on omaa taidemuotoa, jos olet kiinnostunut, voit lukea kaksi animaatio-opetusohjelmaa siitä, miten voit luoda edistyneen telineen ja miten luoda hyppyvaikutus.

Kun rakennat siirtymiä ja animaatioita, sinun täytyy tietää se kaikkia CSS-ominaisuuksia ei voi animoida, joten on aina hyvä tarkistaa CSS Animatable -tilassa oleva kiinteistö, jota haluat muuttaa.

CSS3-animaatiot ja siirtymät toimivat valmistajan etuliitteillä pitkään, mitä meidän ei tarvitse enää käyttää, mutta Mozilla Developer Network suosittelee edelleen lisäämään -webKit etuliite jonkin aikaa, sillä Webkit-pohjaisten selaimien tuki saavutti vasta hiljattain vakauden.