animation-timing-function касиети

animation-timing-function касиети анимациянын өзгөрүү ылдамдыгын (ылдамдануусун) белгилейт. Мисалы, алгач акырын, андан кийин тез, андан кийин кайра акырын жана башка.

Синтаксис

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

Маанилер

Маани	Сүрөттөмө
`ease`	Алгач акырын, андан кийин тез, аягында кайра акырын.
`ease-in`	Акырындап башталып, акырындап ылдамдайт.
`ease-out`	Тез башталып, акырындап токтойт.
`ease-in-out`	Алгач акырын, андан кийин тез, аягында кайра акырын. Ease'тен ылдамдыгы менен айырмаланат.
`linear`	Ар дайым бирдей ылдамдык.
`step-start`	Анимация жок, касиет ошол замат акыркы маанини алат.
`step-end`	Анимация жок, касиет `animation-duration` менен белгиленген убакытты күтөт, андан кийин акыркы маанини ошол замат алат.
`steps`	Касиеттин мааниси секирмектеп өзгөрөт.
`cubic-bezier`	Өзгөчө анимацияны көрсөтүүгө мүмкүндүк берген Безье ийри сызыгы. Караңыз: Безье ийри сызыктарынын генератору.

Демейки маани: ease.

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

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

Ошондой эле караңыз

animation касиети,
анимациялар үчүн кыскартылган касиет катары
@keyframes буйругу,
анимациянын негизги кадрларын көрсөткөн
transition жылмакай өтүүлөр, элементтин үстүнө чычкан алып келгенде анимацияны көрсөткөн