transition-timing-function қасиеті

transition-timing-function қасиеті transition бірқарағандағы өтудің өзгеру жылдамдығын (үдеуін) орнатады. Мысалы, алдымен баяу, содан кейін жылдам, содан кейін баяу және т.б.

Синтаксис

cssселектор {
  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 мәні орнатылғандықтан, анимация баяу басталып, біртіндеп жылдамдайды:

html<div id="elem"></div>

css#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 қасиеті,
оның көмегімен анимация жасауға болады