Overgangs-timing-funktion - CSS-tricks

Den transition-timing-functionegenskab, der normalt anvendes som en del af transitionstenografi, anvendes til at definere en funktion, der beskriver, hvordan en overgang vil forløbe over dens varighed, så en overgang til ændring hastighed under dens forløb.

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

Disse tidsfunktioner kaldes almindeligvis lempelsesfunktioner og kan defineres ved hjælp af en foruddefineret nøgleordsværdi, en trinfunktion eller en kubisk Bézier-kurve.

De tilladte foruddefinerede søgeordsværdier er:

lethed
lineær
lethed
lethed ud
let ind-ud
trin-start
trin-ende

For nogle værdier er effekten muligvis ikke så åbenbar, medmindre overgangsvarigheden er indstillet til en større værdi.

Hvert af de foruddefinerede nøgleord har en ækvivalent kubisk Bézier-kurveværdi eller tilsvarende trinfunktionsværdi. For eksempel vil følgende to tidsfunktionsværdier svare til hinanden:

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

Ligesom følgende to:

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

Brug trin () og Bézier-kurver

Den steps()funktion kan du angive intervaller for timingen funktion. Det tager en eller to parametre, adskilt af et komma: et positivt heltal og en valgfri værdi på enten starteller end. Hvis der ikke er inkluderet en anden parameter, vil den som standard være end.

For at forstå trinfunktioner er her en demo, der bruger steps(4, start)boksen til venstre og steps(4, end)boksen til højre (hold markøren over en boks eller genindlæs rammen for at se overgangene):

Tjek denne pen!

Når det starter specificeret, sker ændringen af værdier i starten af hvert interval, mens det endmedfører, at værdireguleringen finder sted i slutningen af hvert interval.

Et detaljeret kig på Bézier-kurveværdier ligger uden for denne reference, men se referencerne i afsnittet om relaterede links for værktøjer, der visuelt viser, hvordan disse værdier fungerer.

For kompatibilitet i alle understøttende browsere kræves leverandørpræfikser med standardsyntaxen erklæret sidst:

.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 version af IE, der understøtter transition-timing-function) kræver ikke -ms-præfikset.