Funkce časování přechodu - Triky CSS

transition-timing-functionVlastnost, běžně používají jako součást transitionzkratku, se používá pro definování funkce, která popisuje, jak bude přechod probíhat přes jeho délku, což umožňuje přechod na rychlosti změny v jejím průběhu.

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

Tyto časovací funkce se běžně nazývají funkce náběhu a lze je definovat pomocí předdefinované hodnoty klíčového slova, krokové funkce nebo kubické Bézierovy křivky.

Povolené předdefinované hodnoty klíčových slov jsou:

ulehčit
lineární
ulehčení
uvolnění
bezstarostnost
krokový start
krok-konec

U některých hodnot nemusí být účinek tak zřejmý, pokud není doba přechodu nastavena na větší hodnotu.

Každé z předdefinovaných klíčových slov má ekvivalentní hodnotu kubické Bézierovy křivky nebo ekvivalentní hodnotu funkce krokování. Například následující dvě hodnoty funkce časování by byly navzájem ekvivalentní:

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

Stejně jako následující dva:

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

Pomocí kroků () a Bézierových křivek

Tato steps()funkce umožňuje určit intervaly pro funkci časování. Trvá jeden nebo dva parametry oddělené čárkou: kladné celé číslo a volitelná hodnota buď startnebo end. Pokud není zahrnut žádný druhý parametr, použije se výchozí hodnota end.

Abychom porozuměli krokovým funkcím, zde je ukázka, která se používá steps(4, start)pro pole vlevo a steps(4, end)pro pole vpravo (umístěním kurzoru nad pole nebo opětovným načtením rámečku zobrazíte přechody):

Podívejte se na toto pero!

Když startje zadáno, ke změně hodnot dojde na začátku každého intervalu, zatímco endzpůsobí, že ke změně hodnot dojde na konci každého intervalu.

Podrobný pohled na hodnoty Bézierovy křivky je nad rámec tohoto odkazu, nicméně viz odkazy v části související odkazy pro nástroje, které vizuálně ukazují, jak tyto hodnoty fungují.

Pro kompatibilitu ve všech podporujících prohlížečích jsou vyžadovány předpony dodavatelů se standardní syntaxí deklarovanou jako 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 (první stabilní verze IE, která podporuje transition-timing-function) nevyžaduje -ms-předponu.