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касиети,
анын жардамы менен анимация жасаса болот