Siirtymäajastustoiminto - CSS-temppuja

transition-timing-functionOminaisuus, jota käytetään tavallisesti osana transitionpika, käytetään määrittämään funktio, joka kuvaa, kuinka siirtyminen etenee yli sen ajan, joka mahdollistaa siirtymisen muutoksen nopeus sen aikana.

.example ( transition-timing-function: ease-out; )

Näitä ajoitustoimintoja kutsutaan yleisesti keventämistoiminnoiksi, ja ne voidaan määrittää käyttämällä ennalta määritettyä avainsanan arvoa, askelfunktiota tai kuutioista Bézier-käyrää.

Ennalta määritetyt avainsanojen arvot ovat:

helppous
lineaarinen
helppous
helppous
helppous sisään-ulos
askel-alku
askel-pää

Joillekin arvoille vaikutus ei välttämättä ole yhtä ilmeinen, ellei siirtymän kestoksi ole asetettu suurempaa arvoa.

Jokaisella ennalta määritetyllä avainsanalla on vastaava kuutioinen Bézier-käyrän arvo tai vastaava vaihefunktion arvo. Esimerkiksi seuraavat kaksi ajoitusfunktion arvoa vastaavat toisiaan:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Kuten seuraavat kaksi:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Käyttämällä vaiheita () ja Bézier-käyriä

steps()Toiminnolla voit määrittää välein ennakkovalintatoimintaa. Se vaatii yhden tai kaksi parametria pilkulla erotettuna: positiivinen kokonaisluku ja valinnainen arvo joko starttai end. Jos toista parametria ei sisälly, se on oletusarvoisesti end.

Tässä on esittely, joka käyttää steps(4, start)vasemmanpuoleista steps(4, end)ruutua ja oikealla olevaa laatikkoa (viemällä hiiri laatikon päälle tai lataamalla kehys uudelleen siirtymien tarkastelemiseksi):

Katso tämä kynä!

Kun se starton määritetty, arvojen muutos tapahtuu kunkin aikavälin alussa, kun taas endarvojen muutos tapahtuu jokaisen aikavälin lopussa.

Yksityiskohtainen tarkastelu Bézier-käyrän arvoista on tämän viittauksen ulkopuolella, mutta katso linkit-osion viittauksia työkaluille, jotka osoittavat visuaalisesti näiden arvojen toiminnan.

Yhteensopivuuden takaamiseksi kaikissa tukevissa selaimissa tarvitaan toimittajan etuliitteet, ja vakiosyntaksi on julistettu viimeiseksi:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (IE: n ensimmäinen tukeva vakaa versio transition-timing-function) ei vaadi -ms-etuliitettä.