Свойство transition-delay
Свойство transition-delay
transition
жылма-жылма өтүү башталардан мурун күтүү убактысын белгилейт.
Синтаксис
селектор {
transition-delay: убакыт s же ms менен;
}
Маанилер
| Маани | Сүрөттөмө |
|---|---|
s |
Убакытты секунд менен белгилейт (мисалы, 3s).
Бөлчөк маанилерди да белгилөөгө болот,
мисалы, 0.5s - жарым секунд.
|
ms |
Убакытты миллисекунд менен белгилейт (мисалы, 3ms).
Бир секунд - бул 1000 миллисекунд.
|
Демейки маани: 0s.
Мисал
Блокко чычкан курсорун алып келгиле - 3 секунд
эч нерсе болбойт (3s күтүү коюлган),
андан кийин ал өзүнүн туурасын 2 секунд ичинде
жылма-жылма өзгөртөт. Эгер андан кийин курсорду алып кетсеңиз
- анда дагы 3 секунд эч нерсе болбойт,
андан кийин туура жылма-жылма баштапкы маанисине чейин кичирейет:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
transition-delay: 3s;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Мисал
Блокко чычкан курсорун алып келгиле - ал адегенде
өзүнүн туурасын 2 секунд ичинде өзгөртөт, андан кийин
өзүнүн бийиктигин 4 секунд ичинде өзгөртөт.
Касиеттер ирети менен өзгөрөт,
анткени бийиктикке 3 секунд күтүү коюлган
(туура өзгөрүү убактысы). Эгер курсорду алып кетсеңиз -
анда өзгөрүүлөр тескери тартипте болот:
адегенде туура кичирейет, андан кийин бийиктик кичирейет:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s, 4s;
transition-property: width, height;
transition-delay: 0s, 3s;
width: 100px;
height: 25px;
}
#elem:hover {
width: 400px;
height: 50px;
}
:
Ошондой эле караңыз
-
transition-propertyкасиети,
бул жылма-жылма өтүү үчүн касиеттин атын белгилейт -
transition-durationкасиети,
бул жылма-жылма өтүүнүн узактыгын белгилейт -
transition-timing-functionкасиети,
бул жылма-жылма өтүү үчүн убакыт функциясын белгилейт -
transitionкасиети,
бул жылма-жылма өтүү үчүн кыскартылган форма -
animationкасиети,
бул анимация түзүүгө жардам берет