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;
}

Мисол . Мумкин бўлган муаммолар

Қисқа шаклда ёзилган анимация ўзининг номи сабаби ишламаслиги мумкин. Кeling, куйидаги анимацияни кўриб чиқайлик:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Эътиборингизни қаратаман, мен анимация номи sifatida reverse dan foydalanмоқдаман. Илк қарашда, ҳаммаси яхши, лекин анимация ишламайди, чунки reverse - animation-direction хусусияти учун яроқли калит сўз.

Шунингдек, анимация бошқа калит сўзлар номи bilan қисқа шаклда ишлатilганда ҳам ишламайди. Лекин "тўла" шаклда ишлатilганда ҳаммаси яхши ишлайди.

animation-direction учун калит сўз-қийматларга, анимацияларни бузадиганлар, силлиқлаш функцияларига тегишли калит сўзлар, шунингдек infinite, alternate, running, paused ва ҳоказолар ҳам киради.

Шунингдек қаранг

@keyframes командаси,
анимациянинг асосий кадрларини белгиловчи
transition силлиқ ўтишлар, элемент устига чўзилганда анимацияни тақдим этадиган