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

Օրինակ . Հնարավոր խնդիրներ

Համառոտ ձևով գրված անիմացիան կարող է չաշխատել իր անվան պատճառով: Դիտարկենք հետևյալ անիմացիան.

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

Նկատեք, որ ես օգտագործում եմ reverse անիմացիայի անուն: Առաջին հայացքից ամեն ինչ կարգին է, բայց անիմացիան չի աշխատում, քանի որ reverse-ը animation-direction հատկության վավեր բանալի բառ է:

Նաև անիմացիան չի աշխատի համառոտ ձևում օգտագործելիս, եթե անվան մեջ կան այլ բանալի բառեր: Սակայն ամեն ինչ լավ աշխատում է "լրիվ" ձևի նկարագրություն օգտագործելիս:

animation-direction հատկության բանալի բառերին, որոնք խափանում են անիմացիաները, պետք է դասել նաև հարթեցման ֆունկցիաներին վերաբերող բանալի բառերը, ինչպես նաև infinite, alternate, running, paused և այլն:

Տես նաև

@keyframes հրամանը,
որը սահմանում է անիմացիայի հիմնական կադրերը
transition հարթ անցումները, որոնք ներկայացնում են տարրի վրա դրվելու անիմացիա