⌘K

Omadus transition-timing-function

Omadus transition-timing-function määrab sujube ülemineki transition muutumise kiiruse (kiirenduse). Näiteks, alguses aeglaselt, siis kiiresti, siis jälle aeglaselt jne.

Süntaks

cssvalija {
  transition-timing-function: väärtus;
}

Väärtused

Väärtus Kirjeldus
ease Alguses aeglaselt, siis kiiresti, lõpus jälle aeglaselt.
ease-in Algab aeglaselt ja kiireneb järk-järgult.
ease-out Algab kiiresti ja aeglustub järk-järgult.
ease-in-out Alguses aeglaselt, siis kiiresti, lõpus jälle aeglaselt. Erineb ease'ist kiiruse poolest.
linear Alati sama kiirusega.
step-start Animatsiooni pole, omadus võtab kohe lõpliku väärtuse.
step-end Animatsiooni pole, omadus ootab aja, määratud transition-duraton'is, ning võtab seejärel koheselt lõpliku väärtuse.
steps Omaduse väärtus muutub hüpetena.
cubic-bezier Bezier'i kõver, mis võib määrata suvalise animatsiooni. Vaata Bezier'i kõverate generaatorit.

Vaikeväärtus: ease.

Erinevate väärtuste võrdlus

Hõjuta allolevatele plokkidele kursoriga, et näha kõikide ajafunktsioonide tööd:

Näide

Hõjuta plokil kursoriga - see muudab sujuvalt oma laiust 2 sekundi jooksul. Kuna on määratud väärtus ease-in, siis animatsioon algab aeglaselt ja kiireneb järk-järgult: 

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

Результат:

Vaata ka

BackOmadus transition-propertyNextOmadus transition