Animation-duration касиети
animation-duration касиети
анимациянын аткарылуу убактысын белгилейт.
Синтаксис
тандоочу {
animation-duration: s же ms менен убакыт;
}
Маанилери
| Маани | Сүрөттөмө |
|---|---|
s |
Убакытты секунд менен белгилейт (мисалы 3s). |
ms |
Убакытты миллисекунд менен белгилейт (мисалы 3ms). Бир секунд - бул 1000 миллисекунд. |
Демейки маани: 0s.
Мисал
Бул мисалда анимация
3 секунд ичинде ойнотулат:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Ошондой эле караңыз
-
animation-nameкасиети,
анимациянын атын белгилейт -
animation-delayкасиети,
анимациянын аткарылышынан мурун күтүү убактысын белгилейт -
animation-timing-functionкасиети,
анимациянын аткарылуу ылдамдыгын белгилейт -
animation-iteration-countкасиети,
анимациянын кайталануу санын белгилейт -
animation-directionкасиети,
анимациянын багытын белгилейт -
animation-fill-modeкасиети,
анимациянын абалын белгилейт -
animation-play-stateкасиети,
анимацияны токтотууга мүмкүндүк берет -
animationкасиети,
анимациялар үчүн кыскартылган жол -
@keyframesбуйругу,
анимациянын негизги кадрларын аныктайт -
transitionжылмакай өтүүлөр, элементтин үстүнө курсорду алып барганда аткарылуучу анимация