Animation-timing-function хусусияти
animation-timing-function хусусияти
анимациянинг ўзгариш тезлигини (тезланишини)
белгилайди. Масалан, аввал секин, кейин тез,
охирида яна секин ва ҳоказо.
Синтаксис
селектор {
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мулосим ўтишлар, элементга олиб борилганда анимацияни тақдим этади