⌘K

Savybė transition-timing-function

Savybė transition-timing-function nustato sklandžio perėjimo transition greičio kitimą (pagreitį). Pavyzdžiui, pirmiausia lėtai, po to greitai, po to vėl lėtai ir t.t.

Sintaksė

cssselektorius {
  transition-timing-function: reikšmė;
}

Reikšmės

Reikšmė Aprašas
ease Pirmiausia lėtai, po to greitai, pabaigoje vėl lėtai.
ease-in Prasideda lėtai ir palaipsniui pagreitėja.
ease-out Prasideda greitai ir palaipsniui sustoja.
ease-in-out Pirmiausia lėtai, po to greitai, pabaigoje vėl lėtai. Nuo ease skiriasi greičiu.
linear Visada vienodas greitis.
step-start Animacijos nėra, savybė iš karto įgyja galutinę reikšmę.
step-end Animacijos nėra, savybė laukia laiko, nustatyto transition-duraton, o tada akimirksniu įgyja galutinę reikšmę.
steps Savybės reikšmė keičiasi šuoliais.
cubic-bezier Bezier kreivė, kuri gali nustatyti bet kokią animaciją. Žr. Bezier kreivių generatorių.

Numatytoji reikšmė: ease.

Įvairių reikšmių palyginimas

Užveskite pelę žemiau pateiktiems blokams, kad pamatytumėte visų laiko funkcijų tipų veikimą:

Pavyzdys

Užveskite pelę ant bloko - jis sklandžiai pakeis savo plotį per 2 sekundes. Kadangi nustatyta reikšmė ease-in, animacija prasidės lėtai ir palaipsniui pagreitės: 

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

Результат:

Taip pat žiūrėkite

BackSavybė transition-propertyNextSavybė transition