Хосияти transition-timing-function

Хосияти transition-timing-function суръати тағйирёбии (шитоб)-и гузариши равон transition-ро муайян мекунад. Масалан, аввал оҳиста, баъд тез, баъд боз оҳиста ва ғайра.

Синтаксис

cssинтихобкунанда {
  transition-timing-function: қимат;
}

Қиматҳо

Қимат	Тавсиф
`ease`	Аввал оҳиста, баъд тез, дар охир боз оҳиста.
`ease-in`	Оҳиста оғоз шуда ва ба таври тадриҷӣ шитоб мегирад.
`ease-out`	Тез оғоз шуда ва ба таври тадриҷӣ бозмеистад.
`ease-in-out`	Аввал оҳиста, баъд тез, дар охир боз оҳиста. Аз ease бо суръат фарқ мекунад.
`linear`	Ҳамеша ҳамон суръати якхела.
`step-start`	Аниматсия вуҷуд надорад, хосият фавран қимати ниҳоиро қабул мекунад.
`step-end`	Аниматсия вуҷуд надорад, хосият мунтазир мемонад вақте, ки дар `transition-duraton` муайян шудааст, ва сипас фавран қимати ниҳоиро қабул мекунад.
`steps`	Қимати хосият бо қадамҳо тағйир меёбад.
`cubic-bezier`	Хатти Безье, ки метавонад аниматсияи ихтиёриро муайян кунад. Нигаред генератори хатҳои Безье.

Қимати пешфарз: ease.

Мукосимати қиматҳои гуногун

Барои дидани амалиётҳои ҳамаи навъҳои функсияҳои вақтӣ, мишкаро ба блокҳои дар зер овардашуда интиқол диҳед:

Намуна

Мишкаро ба блок интиқол диҳед - он паҳноияшро равон тағйир медиҳад дар муддати 2 сония. Азбаски қимати ease-in муқаррар карда шудааст, аниматсия оҳиста оғоз мешавад ва ба таври тадриҷӣ шитоб мегирад:

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

Результат:

Инчунин нигаред

хосияти transition-duration,
ки тӯли гузариши равонро муайян мекунад
хосияти transition-property,
ки номи хосиятро барои гузариши равон муайян мекунад
хосияти transition-delay,
ки таъхири пеш аз гузариши равонро муайян мекунад
хосияти transition,
ки барои гузариши равон ихтисор мебошад
хосияти animation,
ки бо ёрии он метавон аниматсия сохт