Animation xususiyati

animation xususiyati - bu animatsiya uchun qisqartma xususiyat bo'lib, barcha animatsiya xususiyatlarini bir vaqtning o'zida belgilashga imkon beradi: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Qiymatlarning tartibi muhim emas, animatsiyaning ishlash vaqi animation-duration albatta kechikish animation-delay dan oldin turishi kerak. Faqat animation-name va animation-duration xususiyatlari majburiydir.

Xususiyat shuningdek none qiymatini qabul qilishi mumkin, bu animatsiyani butunlay o'chiradi. Bu qiymat standart qiymat hisoblanadi.

Sintaksis

selector {
	animation: qiymatlar;
}

Misol

Ushbu misolda animatsiyadan oldin 3 soniya kechikish bo'ladi (har bir yangi ijro etishdan oldin), so'ngra animatsiya 6 soniya davomida ijro etiladi:

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

Misol . Mumkin bo'lgan muammolar

Qisqa shaklda yozilgan animatsiya o'z nomi tufayli ishlamasligi mumkin. Keling, quyidagi animatsiyani ko'rib chiqaylik:

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

E'tibor bering, men reverse animatsiya nomidan foydalanmoqdaman. Birinchi qarashda, hamma narsa yaxshi, lekin animatsiya ishlamayapti, chunki reverse - animation-direction xususiyati uchun amal qiluvchi kalit so'z.

Shuningdek, animatsiya nomida boshqa kalit so'zlardan foydalanganda qisqa shaklda ishlamaydi. Lekin "to'liq" shaklda ishlatilganda hamma narsa yaxshi ishlaydi.

animation-direction xususiyatining qiymatlari bo'lgan kalit so'zlar, animatsiyalarni buzadigan, shuningdek silliqlashtirish funksiyalariga tegishli kalit so'zlar, shuningdek infinite, alternate, running, paused va hokazolarni o'z ichiga oladi.

Shuningdek qarang

@keyframes buyrug'i,
animatsiya kalit kadrlarini belgilaydi
silliq o'tishlar transition, element ustiga sichqoncha olib borilganda amalga oshiriladigan animatsiyani ifodalaydi