⌘K

Lastnost transition-timing-function

Lastnost transition-timing-function določa hitrost spreminjanja (pospešek) gladkega prehoda transition. Na primer, najprej počasi, nato hitro, nato počasi in tako naprej.

Sintaksa

cssselektor {
  transition-timing-function: vrednost;
}

Vrednosti

Vrednost Opis
ease Najprej počasi, nato hitro, na koncu spet počasi.
ease-in Začne se počasi in postopoma pospešuje.
ease-out Začne se hitro in postopoma ustavi.
ease-in-out Najprej počasi, nato hitro, na koncu spet počasi. Od ease se razlikuje po hitrosti.
linear Vedno enaka hitrost.
step-start Animacije ni, lastnost takoj prevzame končno vrednost.
step-end Animacije ni, lastnost čaka čas, določen v transition-duraton, nato pa takoj prevzame končno vrednost.
steps Vrednost lastnosti se spreminja s skoki.
cubic-bezier Bézierjeva krivulja, ki lahko določa poljubno animacijo. Glej generator Bézierjevih krivulj.

Privzeta vrednost: ease.

Primerjava različnih vrednosti

Z miško se pomaknite nad spodnje bloke, da si ogledate delovanje vseh vrst časovnih funkcij:

Primer

Z miško se pomaknite nad blok - ta se bo gladko spremenil svojo širino v 2 sekundah. Ker je nastavljena vrednost ease-in, se bo animacija začela počasi in bo postopoma pospeševala: 

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

Результат:

Glejte tudi

BackLastnost transition-propertyNextLastnost transition