Eienskap transition-timing-function

Eienskap transition-timing-function stel die tempo van verandering (versnelling) van die vloeioorgang transition. Byvoorbeeld, eers stadig, dan vinnig, dan stadig ens.

Sintaksis

cssselekteerder {
  transition-timing-function: waarde;
}

Waardes

Waarde	Beskrywing
`ease`	Eers stadig, dan vinnig, aan die einde weer stadig.
`ease-in`	Begin stadig en versnel geleidelik.
`ease-out`	Begin vinnig en stop geleidelik.
`ease-in-out`	Eers stadig, dan vinnig, aan die einde weer stadig. Verskil van ease in tempo.
`linear`	Altyd dieselfde spoed.
`step-start`	Geen animasie nie, eienskap neem onmiddellik die finale waarde aan.
`step-end`	Geen animasie nie, eienskap wag vir die tyd, gestel in `transition-duraton`, en neem dan onmiddellik die finale waarde aan.
`steps`	Die waarde van die eienskap verander met skokke.
`cubic-bezier`	Bezier-kromme wat enige animasie kan spesifiseer. Sien Bezier-kromme generator.

Standaardwaarde: ease.

Vergelyking van verschillende waardes

Beweeg jou muis oor die blokke hieronder, om die werking van alle tipes tydfunksies te sien:

Voorbeeld

Beweeg jou muis oor die blok - dit sal vloeiend sy breedte verander oor 2 sekondes. Aangesien die waarde ease-in gestel is, sal die animasie stadig begin en geleidelik versnel:

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;
}

Результат:

Sien ook

eienskap transition-duration,
wat die duur van die vloeioorgang spesifiseer
eienskap transition-property,
wat die naam van die eienskap vir die vloeioorgang spesifiseer
eienskap transition-delay,
wat die vertraging voor die vloeioorgang spesifiseer
eienskap transition,
wat die afkorting vir die vloeioorgang is
eienskap animation,
waarmee jy 'n animasie kan maak