Prehodno-časovna funkcija - CSS-triki

transition-timing-functionLastnost, ki se običajno uporabljajo kot del transitionokrajšavi, se uporablja za opredelitev funkcijo, ki opisuje, kako bo prehod napreduje njegovo trajanje, ki omogoča prehod na hitrost sprememb med svoje seveda.

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

Te časovne funkcije se običajno imenujejo funkcije olajšanja in jih je mogoče določiti z uporabo vnaprej določene vrednosti ključne besede, koračne funkcije ali kubične Bézierjeve krivulje.

Vnaprej določene vrednosti ključnih besed so:

lahkotnost
linearno
enostavnost
sprostitev
enostavnost-out-out
korak-začetek
korak-konec

Pri nekaterih vrednostih učinek morda ni tako očiten, razen če je trajanje prehoda nastavljeno na večjo vrednost.

Vsaka od vnaprej določenih ključnih besed ima enakovredno kubično vrednost Bézierjeve krivulje ali enakovredno vrednost koračne funkcije. Na primer, naslednji dve vrednosti časovne funkcije bi bili enakovredni:

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

Tako kot naslednja dva:

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

Uporaba korakov () in Bézierjevih krivulj

steps()Funkcija vam omogoča, da določite intervale za funkcijo krmiljenja. Potrebuje enega ali dva parametra, ločena z vejico: pozitivno celo število in neobvezna vrednost enega startali end. Če ni vključen noben drugi parameter, bo privzeto nastavljen na end.

Da bi razumeli funkcije korakov, je tukaj predstavitev, ki se uporablja steps(4, start)za polje na levi in steps(4, end)za polje na desni (premaknite miškin kazalec nad polje ali znova naložite okvir, da si ogledate prehode):

Oglejte si to pisalo!

Ko startje določeno, se sprememba vrednosti zgodi na začetku vsakega intervala, medtem ko endpovzroči, da se vrednost spremeni na koncu vsakega intervala.

Podroben pregled vrednosti Bézierjeve krivulje presega obseg tega sklica, vendar glejte reference v odseku povezanih povezav za orodja, ki nazorno prikazujejo, kako te vrednosti delujejo.

Za združljivost v vseh podpornih brskalnikih so potrebne predpone ponudnikov s standardno sintakso, razglašeno za zadnjo:

.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 (prva stabilna različica IE, ki podpira transition-timing-function) ne zahteva -ms-predpone.