Kuinka käyttää CSS3-siirtymiä

Everyone loves motion. Jokainen rakastaa liikettä. Neljännen ulottuvuuden (ajan) lisääminen sivuston suunnitteluun on tärkein tapa, jossa näyttöperustainen muotoilu erottuu painosuunnittelusta. CSS-siirtymät ovat yksinkertainen menetelmä elementin ominaisuuksien animoimiseksi, joiden avulla voit rikastuttaa tiettyjä Web-suunnittelun tapahtumia ilman Flash- tai JavaScript-toimintoja.

W3C kuvaa oikein verkkosivuillaan tapahtuvia siirtymiä, koska "CSS Transitionsin avulla kiinteistön muutokset CSS-arvoissa tapahtuvat sujuvasti tiettynä ajanjaksona". Toisin sanoen CSS-siirtymät antavat meille mahdollisuuden muokata ominaisuutta vähitellen, mikä luo liikkeen tunnetta ja suosii hienotunteisuutta ja tunteita, mikä ei ole mahdollista nopealla muutoksella.

Selaintuki

Kaikki nykyaikaiset selaimet (kyllä ​​jopa IE!) Tukevat nyt CSS-siirtymiä. Kuitenkin tärkeämpää, jos siirtymää ei tueta käytetyssä selaimessa, siirtyminen ohitetaan, ja ominaisuusmuutokset tulevat voimaan välittömästi. Tämä armollinen hajoaminen on parhaiden käytäntöjen kulmakivi.

Selaintuen tuen laajentamiseksi voimme käyttää myyjän etuliitteitä. Tämä laajentaa ominaisuutta myös Firefox 4-15: een, Opera 10.5-12: een ja useimpiin Chrome- ja Safari-versioihin. Koodi, mukaan lukien toimittajan etuliitteen vaihtoehdot, näyttää tältä:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

Kiinteä ominaisuus lisätään pinon pohjaan, jotta varmistetaan, että lopullinen impleme- tio valottaa kaikki muut, koska ominaisuus siirtyy luonnoksesta lopulliseen tilaan.

Siirtymämenetelmät

CSS-siirtymää varten on neljä parametria:

• siirtymä-ominaisuus: tweened -ominaisuus tai avainsana "all", jota sovelletaan kaikkiin ominaisuuksiin;
• siirtymä-kesto: siirtymisen kesto ;
• Siirtymäajastustoiminto: sovellettava kevennys, tämä luo luonnollisempia liikkeitä
• transtion-delay: määrittää viivästyksen siirtymisen alkuun.

Lisäksi voit käyttää myös pikatoimitusominaisuutta (kuten yllä olevassa esimerkissä), jossa parametrit määritellään ominaisuudeksi, kestoksi, ajoitustoiminnoksi, viiveeksi.

Ominaisuudet, jotka voidaan siirtää

Voit siirtää ominaisuuksia, jotka voidaan muuntaa matemaattiseksi arvoksi. Joten voit esimerkiksi siirtää fonttikokoa; et voi siirtää kirjasinkokoa.

Täydellinen luettelo ominaisuuksista, jotka voidaan siirtää tällä hetkellä, on seuraava:

raja-ala-väri, raja-ala-leveys, raja-vasen-väri, raja-vasen-leveys, raja-oikea-väri, raja-oikea-leveys, rajakorkeus, marginaali-ala, marginaalin vasen, marginaalin oikea, marginaalin yläreuna, maksimikorkeus, max-korkeus, marginaalin yläreuna, leveys, min-korkeus, min-leveys, opasiteetti, ääriviivat, ääriviivat, pehmuste-pohja, pehmuste-vasen, pehmuste-oikea, pehmuste-top, oikea, teksti- kohdistaa, leveys, sanavarasto, z-indeksi.

Käytä siirtymiä

Siirtymäilmoitukset liitetään elementin normaaliin tilaan. Siksi vain kerran ilmoitettu useille tiloille, kuten: fokusointi, aktiiviset ja pseudo-luokat.

Seuraavan koodin avulla voimme perustaa perusvalikon ja tekstin osan. Se on tyyliltään niin, että valikkokohdat vaihtavat värejä ja taustaväriä, kun ne ovat rullatut, niin että sisäinen linkki vaihtaa alleviivan värinsä valkoiseksi vihreiksi, kun liukuu päälle:

Business
  Koodi 
  Design 
  inspiraatio 
  sekalainen 
  mobile 
  Uutiset 
  voimavarat 
  Käytettävyys 
  Integer posuere erat ante inline link   Venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Kokonaisluvut antavat anteeksi veneen tilalle.  Nullam quis risus eget urna mollis ornare vel eu leo. 

Näin se näyttää:

Käytätkö CSS3-siirtymiä? Mitä vaikutuksia olet voinut luoda? Kerro meille kommentit.

Esitetty kuva / pikkukuva, liikkuva kuva kautta Shutterstock.