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