Overgang-timing-funksjon - CSS-triks

Innholdsfortegnelse

Ved hjelp av trinn () og Bézier-kurver

Den transition-timing-functionegenskap, som normalt brukes som en del av transitionen kortform, blir brukt til å definere en funksjon som beskriver hvordan en overgang vil fortsette over dens varighet, slik at en overgang til endringshastigheten under sin gang.

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

Disse tidsfunksjonene kalles ofte lettelsesfunksjoner, og kan defineres ved hjelp av en forhåndsdefinert søkeordverdi, en trinnfunksjon eller en kubisk Bézier-kurve.

De forhåndsdefinerte søkeordverdiene som er tillatt er:

letthet
lineær
letthet
lette ut
letthet ut
trinnstart
trinn-slutt

For noen verdier kan det hende at effekten ikke er like åpenbar med mindre overgangsvarigheten er satt til en større verdi.

Hvert av de forhåndsdefinerte nøkkelordene har en tilsvarende kubisk Bézier-kurveverdi eller tilsvarende trinnfunksjonsverdi. Følgende to tidsfunksjonverdier vil for eksempel være ekvivalente med hverandre:

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

Som de følgende to:

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

Ved hjelp av trinn () og Bézier-kurver

Den steps()funksjonen kan du angi intervaller for timing funksjon. Det tar en eller to parametere, atskilt med komma: et positivt heltall og en valgfri verdi på enten starteller end. Hvis ingen andre parametere er inkludert, vil den som standard være end.

For å forstå trinnfunksjoner, her er en demo som bruker steps(4, start)for boksen til venstre og steps(4, end)for boksen til høyre (svev over en boks eller last inn rammen for å se overgangene):

Sjekk ut denne pennen!

Når starter spesifisert, skjer endring av verdier ved starten av hvert intervall, mens det endfører til at endring av verdier skjer på slutten av hvert intervall.

En detaljert oversikt over Bézier-kurveverdier ligger utenfor omfanget av denne referansen, men se referansene i delen med relaterte lenker for verktøy som viser visuelt hvordan disse verdiene fungerer.

For kompatibilitet i alle støttende nettlesere kreves leverandørprefikser, med standardsyntaks deklarert 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ørste stabile versjonen av IE som støtter transition-timing-function) krever ikke -ms-prefikset.