Свойство 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.

Турли қийматларни солиштириш

Ҳамма турдаги вақт функцияларининг ишлашини кўриш учун куйидаги блоклар устига sichqonчани олиб боринг:

Мисол

Блок устига sichqonчани олиб боринг - унинг эни 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,
анимация яратишда ёрдам беради