Funkcia časovania prechodu - Triky CSS

transition-timing-functionVlastnosť, bežne používajú ako súčasť transitionskratku, sa používa pre definovanie funkcie, ktorá popisuje, ako bude prechod prebiehať cez jeho dĺžku, čo umožňuje prechod na rýchlosti zmeny v jej priebehu.

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

Tieto časovacie funkcie sa bežne nazývajú funkcie uvoľňovania a je možné ich definovať pomocou preddefinovanej hodnoty kľúčového slova, krokovej funkcie alebo kubickej Bézierovej krivky.

Povolené preddefinované hodnoty kľúčového slova sú:

ľahkosť
lineárny
uľahčenie
odľahčenie
easy-in-out
krokový štart
krok-koniec

Pre niektoré hodnoty nemusí byť efekt taký zrejmý, pokiaľ nie je doba prechodu nastavená na vyššiu hodnotu.

Každé z preddefinovaných kľúčových slov má ekvivalentnú hodnotu kubickej Bézierovej krivky alebo ekvivalentnú hodnotu funkcie krokovania. Napríklad nasledujúce dve hodnoty časovacej funkcie by boli navzájom ekvivalentné:

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

Rovnako ako nasledujúce dva:

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

Pomocou krokov () a Bézierových kriviek

Táto steps()funkcia umožňuje určiť intervaly pre funkciu časovania. Trvá jeden alebo dva parametre oddelené čiarkou: kladné celé číslo a voliteľná hodnota buď startalebo end. Ak nie je zahrnutý žiadny druhý parameter, použije sa predvolená hodnota end.

Pre pochopenie funkcií krokovania je tu ukážka, ktorá sa používa steps(4, start)pre políčko vľavo a steps(4, end)pre pole vpravo (umiestnením kurzora myši na políčko alebo opätovným načítaním rámčeka zobrazíte prechody):

Vyskúšajte toto pero!

Keď startje zadané, zmena hodnôt nastane na začiatku každého intervalu, zatiaľ endčo zmena hodnôt nastane na konci každého intervalu.

Podrobný pohľad na hodnoty Bézierovej krivky je nad rámec tohto odkazu, avšak pozrite si odkazy v sekcii súvisiace odkazy na nástroje, ktoré vizuálne ukazujú, ako tieto hodnoty fungujú.

Kvôli kompatibilite vo všetkých podporovaných prehľadávačoch sú vyžadované predpony dodávateľov so štandardnou syntaxou deklarovanou ako posledná:

.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 (prvá stabilná verzia IE, ktorá podporuje transition-timing-function) nevyžaduje -ms-predponu.