Övergångs-timing-funktion - CSS-tricks

Den transition-timing-functionegenskapen, som normalt används som en del av transitionstenografi, används för att definiera en funktion som beskriver hur en övergång kommer att gå över sin längd, så att en övergång till hastighetsändring under sitt lopp.

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

Dessa tidsfunktioner kallas vanligtvis lättnadsfunktioner och kan definieras med hjälp av ett fördefinierat nyckelordsvärde, en stegfunktion eller en kubisk Bézier-kurva.

De fördefinierade sökordsvärdena är tillåtna:

lätthet
linjär
lätthet
lätthet
lätthet ut
stegstart
steg-slut

För vissa värden kanske effekten inte är lika uppenbar om inte övergångstiden är inställd på ett större värde.

Var och en av de fördefinierade nyckelorden har ett motsvarande kubiskt Bézier-kurvvärde eller motsvarande stegfunktionsvärde. Till exempel skulle följande två tidsfunktionsvärden motsvara varandra:

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

Liksom följande två:

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

Med hjälp av steg () och Bézier-kurvor

Med steps()funktionen kan du ange intervall för tidsfunktionen. Det tar en eller två parametrar, åtskilda av ett kommatecken: ett positivt heltal och ett valfritt värde på antingen starteller end. Om ingen andra parameter ingår, kommer den att vara standard end.

För att förstå stegfunktioner, här är en demo som används steps(4, start)för rutan till vänster och steps(4, end)för rutan till höger (sväva över en ruta eller ladda om ramen för att se övergångarna):

Kolla in den här pennan!

När startanges anges ändring av värden vid början av varje intervall, medan endorsakar ändring av värden inträffar i slutet av varje intervall.

En detaljerad titt på Béziers kurvvärden ligger utanför denna referens, men se referenserna i avsnittet relaterade länkar för verktyg som visuellt visar hur dessa värden fungerar.

För kompatibilitet i alla stödjande webbläsare krävs leverantörsprefix, med standardsyntax deklarerad som sist:

.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 (den första stabila versionen av IE som stöds transition-timing-function) kräver inte -ms-prefixet.