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