Свойство transition-timing-function
Свойство transition-timing-function
жойлашма ўтмининг transition ўзгариш тезлигини
(тезланишини) белгилайди. Масалан,
аввал секин, сўнг тез, сўнгра секин
ва ҳоказо.
Синтаксис
селектор {
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 қиймати белгиланган, анимация
секин бошланади ва аста-секин тезлашади:
<div id="elem"></div>
#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,
анимация яратишда ёрдам беради