Egenskaben transition-timing-function

Egenskaben transition-timing-function indstiller hastigheden for ændring (acceleration) af den glid overgang transition. For eksempel, først langsomt, derefter hurtigt, derefter langsomt osv.

Syntaks

selektor {
	transition-timing-function: værdi;
}

Værdier

Værdi	Beskrivelse
`ease`	Først langsomt, derefter hurtigt, i slutningen igen langsomt.
`ease-in`	Begynder langsomt og accelererer gradvist.
`ease-out`	Begynder hurtigt og stopper gradvist.
`ease-in-out`	Først langsomt, derefter hurtigt, i slutningen igen langsomt. Forskellen fra ease er hastigheden.
`linear`	Altid den samme hastighed.
`step-start`	Ingen animation, egenskaben antager straks den endelige værdi.
`step-end`	Ingen animation, egenskaben venter i den tid, der er angivet i `transition-duraton`, og antager derefter øjeblikkeligt den endelige værdi.
`steps`	Egenskabens værdi ændres med spring.
`cubic-bezier`	En Bezier-kurve, der kan definere en vilkårlig animation. Se generatoren af Bezier-kurver.

Standardværdi: ease.

Sammenligning af forskellige værdier

Før musen over nedenstående blokke for at se alle typer af tidsfunktioner i aktion:

Eksempel

Før musen over blokken - den vil glidende ændre sin bredde på 2 sekunder. Da værdien ease-in er indstillet, vil animationen starte langsomt og gradvist accelerere:

<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 også

egenskaben transition-duration,
som angiver varigheden af den glid overgang
egenskaben transition-property,
som angiver egenskabsnavnet for den glid overgang
egenskaben transition-delay,
som angiver forsinkelsen før den glid overgang
egenskaben transition,
som er en forkortelse for den glid overgang
egenskaben animation,
som kan bruges til at lave animation