Animation-timing-function хусусияти

animation-timing-function хусусияти анимациянинг ўзгариш тезлигини (тезланишини) белгилайди. Масалан, аввал секин, кейин тез, охирида яна секин ва ҳоказо.

Синтаксис

cssселектор {
  animation-timing-function: қиймат;
}

Қийматлар

Қиймат	Тасниф
`ease`	Аввал секин, кейин тез, охирида яна секин.
`ease-in`	Секин бошланади ва аста-секин тезлашади.
`ease-out`	Тез бошланади ва аста-секин тўхтайди.
`ease-in-out`	Аввал секин, кейин тез, охирида яна секин. Ease дан тезлик билан фарқ қилади.
`linear`	Ҳар доим бир хил тезлик.
`step-start`	Анимация йўқ, хусусият дароқ якуний қийматни олади.
`step-end`	Анимация йўқ, хусусият `animation-duraton` да белгиланган вақтни кутади, сўнгра дақиқада якуний қийматни олади.
`steps`	Хусусиятнинг қиймати сакраб ўзгаради.
`cubic-bezier`	Ихтиёрий анимацияни белгилай оладиган Безье эгри чизиғи. Қара: Безье эгри чизиқлари генератори.

Стандарт қиймат: ease.

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

Ҳар хил вақт функцияларининг ишлашини кўриш учун куйидаги блокларга sichqonchanі olib boring:

Шунингдек қаранг

animation хусусияти,
анимациялар учун қисқартирилган хусусият ҳисобланади
@keyframes буюруғи,
анимациянинг асосий кадрларини белгилайди
transition мулосим ўтишлар, элементга олиб борилганда анимацияни тақдим этади