⌘K

Sifa ya transition-timing-function

Sifa transition-timing-function inaweka kasi ya mabadiliko (mwelekeo) ya mpito laini transition. Kwa mfano, kwanza polepole, kisha haraka, kisha polepole n.k.

Syntax

csskichaguli {
  transition-timing-function: thamani;
}

Thamani

Thamani Maelezo
ease Kwanza polepole, kisha haraka, mwisho tena polepole.
ease-in Huanza polepole na hatua kwa hatua huharakisha.
ease-out Huanza haraka na hatua kwa hatua husimama.
ease-in-out Kwanza polepole, kisha haraka, mwisho tena polepole. Inatofautiana na ease kwa kasi.
linear Daima kasi ile ile.
step-start Hakuna animeshon, sifa huchukua thamani ya mwisho mara moja.
step-end Hakuna animeshon, sifa inangojea muda, uliowekwa katika transition-duraton, kisha mara moja huchukua thamani ya mwisho.
steps Thamani ya sifa hubadilika kwa miruko.
cubic-bezier Mkunjo wa Bezier, ambao unaweza kuweka animeshon ya kiholela. Angalia kizazi cha mikunjo ya Bezier.

Thamani chaguomsingi: ease.

Kulinganisha thamani tofauti

Leta kielekezio juu ya vitalu vilivyowasilishwa hapa chini, ili kuona utendakazi wa aina zote za vitendakazi vya muda:

Mfano

Leta kielekezio juu ya kitu - kitabadilisha kwa laini upana wake kwa 2 sekunde. Kwa kuwa imewekwa thamani ease-in, basi animeshon itaanza polepole na hatua kwa hatua itaharakisha: 

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

Результат:

Angalia pia

BackSifa transition-propertyNextSifa transition