Funkcija prijelaznog vremena - CSS-trikovi

transition-timing-functionImovine, obično se koristi kao dio transitionstenogram, koristi se za definiranje funkciju koja opisuje kako prijelaz će nastaviti preko njeno trajanje, dopuštajući prijelaz na brzinu promjena tijekom svojih tečaja.

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

Te se vremenske funkcije obično nazivaju olakšavajućim funkcijama i mogu se definirati pomoću unaprijed definirane vrijednosti ključne riječi, koračne funkcije ili kubične Bézierove krivulje.

Dopuštene vrijednosti unaprijed definirane ključne riječi su:

olakšati
linearno
lagodnost
lagodnost
lakoća ulaska
korak-početak
korak-kraj

Za neke vrijednosti učinak možda neće biti toliko očit ako trajanje prijelaza nije postavljeno na veću vrijednost.

Svaka od unaprijed definiranih ključnih riječi ima ekvivalentnu kubičnu vrijednost Bézierove krivulje ili ekvivalentnu vrijednost koračne funkcije. Na primjer, sljedeće dvije vrijednosti vremenske funkcije bile bi jednake jedna drugoj:

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

Kao i sljedeće dvije:

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

Koristeći korake () i Bézierove krivulje

steps()Funkcija omogućuje vam da odredite intervale za funkciju vremena. Potrebni su jedan ili dva parametra, odvojena zarezom: pozitivan cijeli broj i neobavezna vrijednost bilo startili end. Ako nije uključen drugi parametar, zadano je na end.

Da biste razumjeli koračne funkcije, evo demonstracije koja se koristi steps(4, start)za okvir s lijeve strane i steps(4, end)za okvir s desne strane (zadržite pokazivač iznad okvira ili ponovo učitajte okvir da biste vidjeli prijelaze):

Pogledajte ovu olovku!

Kad startje navedeno, promjena vrijednosti događa se na početku svakog intervala, dok enduzrokuje da se promjena vrijednosti događa na kraju svakog intervala.

Detaljan pogled na vrijednosti Bézierove krivulje izvan je dosega ove reference, no pogledajte reference u odjeljku povezanih veza za alate koji vizualno pokazuju kako ove vrijednosti funkcioniraju.

Za kompatibilnost u svim podržanim preglednicima potrebni su prefiksi dobavljača, sa standardnom sintaksom koja je proglašena zadnjom:

.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 verzija IE-a koja podržava transition-timing-function) ne zahtijeva -ms-prefiks.