Egenskapen transition-timing-function

Egenskapen transition-timing-function ställer in förändringshastigheten (accelerationen) för den mjuka övergången transition. Till exempel, först långsamt, sedan snabbt, sedan långsamt osv.

Syntax

selektor {
	transition-timing-function: värde;
}

Värden

Värde	Beskrivning
`ease`	Först långsamt, sedan snabbt, i slutet åter långsamt.
`ease-in`	Börjar långsamt och accelererar gradvis.
`ease-out`	Börjar snabbt och stannar gradvis.
`ease-in-out`	Först långsamt, sedan snabbt, i slutet åter långsamt. Skiljer sig från ease i hastighet.
`linear`	Alltid samma hastighet.
`step-start`	Ingen animation, egenskapen tar omedelbart slutvärdet.
`step-end`	Ingen animation, egenskapen väntar tiden anges i `transition-duraton`, och tar sedan omedelbart slutvärdet.
`steps`	Egenskapens värde ändras i steg.
`cubic-bezier`	En Bezier-kurva som kan skapa godtycklig animation. Se generator för Bezier-kurvor.

Standardvärde: ease.

Jämförelse av olika värden

Håll muspekaren över blocken nedan för att se alla typer av timing-funktioner i arbete:

Exempel

Håll muspekaren över blocket - det kommer mjukt att ändra sin bredd på 2 sekunder. Eftersom värdet ease-in är inställt kommer animationen börja långsamt och gradvis accelerera:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Se även

egenskapen transition-duration,
som anger varaktigheten för den mjuka övergången
egenskapen transition-property,
som anger egenskapsnamnet för den mjuka övergången
egenskapen transition-delay,
som anger fördröjningen före den mjuka övergången
egenskapen transition,
som är en förkortning för den mjuka övergången
egenskapen animation,
som kan skapa animation