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.

Ар кандай маанилерди салыштыруу

Төмөндө келтирилген блоктордун үстүнө чычканды алып келиңиз, бардык убакыт функцияларынын иштешин көрүү үчүн:

Мисал

Блоктун үстүнө чычканды алып келиңиз - ал өзүнүн туурасын 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 касиети,
анын жардамы менен анимация жасаса болот