Animation xassəsi

animation xassəsi - animasiya üçün qısa yazılış xassəsidir, animasiya üçün bütün xassələri eyni zamanda təyin etməyə imkan verir: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Dəyərlərin sırasının əhəmiyyəti yoxdur, animasiyanın icra müddəti animation-duration mütləq olaraq gecikmədən animation-delay əvvəl olmalıdır. Yalnız animation-name və animation-duration xassələri məcburidir.

Xassə həmçinin none dəyərini qəbul edə bilər, bu animasiyanı tamamilə söndürür. Bu dəyər standart dəyərdir.

Sintaksis

selektor {
	animation: dəyərlər;
}

Nümunə

Bu nümunədə animasiyadan əvvəl 3 saniyə gecikmə olacaq (hər yeni oxuduqdan sonra), və sonra animasiya 6 saniyə ərzində oxunacaq:

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

Nümunə . Mümkün problemlər

Qısa formada yazılmış animasiya öz adı səbəbindən işləməyə bilər. Gəlin aşağıdakı animasiyanı nəzərdən keçirək:

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

Diqqət edin, mən animasiyanın adı kimi reverse istifadə edirəm. İlk baxışdan hər şey yaxşıdır, amma animasiya işləmir, çünki reverse - animation-direction xassəsi üçün etibarlı açar sözdür.

Həmçinin animasiya qısa formada istifadə edilərkən digər açar sözlərin adlarında işləməyəcək. Amma "tam" forma təsviri istifadə edilərkən hər şey yaxşı işləyir.

animation-direction xassəsinin dəyər açar sözlərinə, animasiyaları pozanlara, həmçinin hamarlama funksiyalarına aid olan açar sözlər, eləcə də infinite, alternate, running, paused və s. aiddir.

Həmçinin bax

@keyframes əmrini,
animasiyanın əsas kadrlarını təyin edən
transition hamar keçidlər, elementin üzərinə gəldikdə animasiya təmsil edən