Átmenet-időzítés-függvény - CSS-trükkök

Az a transition-timing-functiontulajdonság, amelyet általában a transitiongyorsírás részeként használnak, egy olyan funkció meghatározására szolgál, amely leírja, hogy az átmenet hogyan fog tovább haladni az időtartama alatt, lehetővé téve az átmenet sebességének megváltoztatását a menet során.

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

Ezeket az időzítési függvényeket általában könnyítő függvényeknek nevezik, és előre definiált kulcsszóérték, léptetőfüggvény vagy köbös Bézier-görbe segítségével definiálhatók.

Az előre definiált kulcsszóértékek a következők:

könnyedség
lineáris
könnyû bejutás
könnyűség
könnyű be-be
lépés-indítás
lépés vége

Bizonyos értékek esetében a hatás nem lehet annyira nyilvánvaló, hacsak az átmenet időtartamát nagyobb értékre nem állítják be.

Az előre definiált kulcsszavak mindegyike rendelkezik ekvivalens köbméteres Bézier-görbe értékkel vagy ezzel egyenértékű lépésfüggvény-értékkel. Például a következő két időzítési függvény értéke egyenértékű egymással:

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

Csakúgy, mint a következő kettő:

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

Lépések () és Bézier görbék felhasználásával

A steps()funkció lehetővé teszi az időzítési funkció intervallumainak megadását. Ez egy vagy két paramétert vesz igénybe vesszővel elválasztva: pozitív egész számot és opcionális értéket startvagy a end. Ha nem tartalmaz második paramétert, akkor az alapértelmezett értéke end.

A léptetési funkciók megértéséhez íme egy bemutató, amely steps(4, start)a bal oldali és steps(4, end)a jobb oldali mezőhöz használ (mutasson az egérrel egy doboz fölé, vagy töltse be újra a keretet az átmenetek megtekintéséhez):

Nézze meg ezt a tollat!

Ha meg startvan adva, akkor az értékek változása az egyes intervallumok elején történik, miközben endaz értékek változása az egyes intervallumok végén következik be.

A Bézier-görbe értékeinek részletes áttekintése meghaladja a hivatkozás kereteit, azonban lásd a kapcsolódó linkek szakaszban található hivatkozásokat azokhoz az eszközökhöz, amelyek vizuálisan bemutatják ezeknek az értékeknek a működését.

Az összes támogató böngésző kompatibilitásához szállító előtagokra van szükség, a szabványos szintaxissal utoljára deklarálva:

.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; )

Az IE10 (az IE első támogatott stabil verziója transition-timing-function) nem igényli az -ms-előtagot.