⌘K

Ominaisuus transition-timing-function

Ominaisuus transition-timing-function asettaa transition-siirtymän muutosnopeuden (kiihdytyksen). Esimerkiksi ensin hitaasti, sitten nopeasti, sitten hitaasti jne.

Syntaksi

cssvalitsin {
  transition-timing-function: arvo;
}

Arvot

Arvo Kuvaus
ease Ensin hitaasti, sitten nopeasti, lopussa taas hitaasti.
ease-in Alkaa hitaasti ja kiihtyy vähitellen.
ease-out Alkaa nopeasti ja pysähtyy vähitellen.
ease-in-out Ensin hitaasti, sitten nopeasti, lopussa taas hitaasti. Eroaa easesta nopeudella.
linear Aina sama nopeus.
step-start Ei animaatiota, ominaisuus saa välittömästi lopullisen arvon.
step-end Ei animaatiota, ominaisuus odottaa transition-duraton:ssa asetetun ajan, ja ottaa sitten välittömästi lopullisen arvon.
steps Ominaisuuden arvo muuttuu hyppäyksin.
cubic-bezier Bezier-käyrä, joka voi määrittää mielivaltaisen animaation. Katso Bezier-käyrägeneraattori.

Oletusarvo: ease.

Eri arvojen vertailu

Vie hiiri alla olevien lohkojen päälle nähdäksesi kaikkien aikafunktiotyypien toiminnan:

Esimerkki

Vie hiiri lohkon päälle - se muuttaa sulavasti leveyttään 2 sekunnissa. Koska arvo on asetettu ease-in, animaatio alkaa hitaasti ja kiihtyy vähitellen: 

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

Результат:

Katso myös

BackOminaisuus transition-propertyNextTransition-ominaisuus