Pereinamojo laiko funkcija - CSS-gudrybės

transition-timing-functionNuosavybė, paprastai naudojamas kaip dalis transitionsutrumpinta, yra naudojamas apibrėžti funkciją, kuri apibūdinama, kaip perėjimas vyks per jos trukmė, leidžianti pereiti prie kaitos greičiu per savo kurso.

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

Šios laiko funkcijos paprastai vadinamos lengvinimo funkcijomis ir jas galima apibrėžti naudojant iš anksto nustatytą raktinio žodžio vertę, žingsnio funkciją arba kubinę Bézier kreivę.

Iš anksto nustatytos raktinių žodžių vertės yra šios:

lengvumas
linijinis
lengvumas
lengvumas
palengvėjimas
žingsnis-pradžia
žingsnis-pabaiga

Kai kurių reikšmių poveikis gali būti ne toks akivaizdus, nebent perėjimo trukmė būtų nustatyta didesne verte.

Kiekvienas iš anksto apibrėžtų raktinių žodžių turi lygiavertę kubinę Bézier kreivės vertę arba lygiavertę žingsnio funkcijos vertę. Pvz., Šios dvi laiko funkcijos reikšmės būtų lygiavertės viena kitai:

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

Kaip ir šie du:

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

Naudojant žingsnius () ir Bézier kreives

Ši steps()funkcija leidžia nurodyti laiko funkcijos intervalus. Tam reikia vieno ar dviejų parametrų, atskirtų kableliu: teigiamas sveikasis skaičius ir pasirinktinė startarba end. Jei nėra antrojo parametro, jis bus numatytasis end.

Norėdami suprasti pakopų funkcijas, pateikite demonstracinę versiją, naudojamą steps(4, start)kairiajame steps(4, end)lauke ir dešinėje esančiame laukelyje (užveskite pelės žymeklį virš langelio arba iš naujo įkelkite rėmelį, kad galėtumėte peržiūrėti perėjimus):

Patikrinkite šį rašiklį!

Kai startnurodyta, reikšmės pasikeičia kiekvieno intervalo pradžioje, o endvertės pasikeičia kiekvieno intervalo pabaigoje.

Išsamus Bézier kreivės verčių vaizdas nėra šios nuorodos sritis, tačiau žr. Nuorodas susijusių nuorodų skyriuje įrankiams, kurie vizualiai parodo, kaip šios vertės veikia.

Norint suderinti visas palaikomas naršykles, reikalingi tiekėjo priešdėliai, o standartinė sintaksė paskelbta paskutine:

.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 (pirmoji palaikoma IE versija transition-timing-function) nereikia -ms-prefikso.