Eigenschap transition-timing-function

De eigenschap transition-timing-function bepaalt de veranderingssnelheid (versnelling) van een vloeiende overgang transition. Bijvoorbeeld, eerst langzaam, dan snel, dan weer langzaam, enz.

Syntaxis

cssselector {
  transition-timing-function: waarde;
}

Waarden

Waarde	Beschrijving
`ease`	Eerst langzaam, dan snel, aan het einde weer langzaam.
`ease-in`	Begint langzaam en versnelt geleidelijk.
`ease-out`	Begint snel en vertraagt geleidelijk tot stilstand.
`ease-in-out`	Eerst langzaam, dan snel, aan het einde weer langzaam. Verschilt van ease in snelheid.
`linear`	Altijd dezelfde constante snelheid.
`step-start`	Geen animatie, de eigenschap neemt onmiddellijk de eindwaarde aan.
`step-end`	Geen animatie, de eigenschap wacht de tijd ingesteld in `transition-duraton`, en neemt dan onmiddellijk de eindwaarde aan.
`steps`	De waarde van de eigenschap verandert in sprongen.
`cubic-bezier`	Een Bézier-kromme die een willekeurige animatie kan definiëren. Zie Bézier-kromme generator.

Standaardwaarde: ease.

Vergelijking van verschillende waarden

Beweeg je muis over de onderstaande blokken om de werking van alle soorten timingfuncties te zien:

Voorbeeld

Beweeg je muis over het blok - het verandert soepel zijn breedte in 2 seconden. Omdat de waarde ease-in is ingesteld, start de animatie langzaam en zal geleidelijk versnellen:

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

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

Результат:

Zie ook

de eigenschap transition-duration,
die de duur van een vloeiende overgang instelt
de eigenschap transition-property,
die de naam van de eigenschap voor een vloeiende overgang instelt
de eigenschap transition-delay,
die een vertraging voor de vloeiende overgang instelt
de eigenschap transition,
die de verkorte notatie is voor een vloeiende overgang
de eigenschap animation,
waarmee je een animatie kunt maken