Animation қасиеті
animation қасиеті - бұл анимацияға арналған
қысқартылған қасиет, анимацияның барлық қасиеттерін
bір мезгілде орнатуға мүмкіндік береді: 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тегіс көшулер, элементке түскенде орындалатын анимацияны ұсынады