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