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 тегіс көшулер, элементке түскенде орындалатын анимацияны ұсынады