Хосияти 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, ки аниматсиеро таҷассум мекунанд, ки ба элемент нишон дода мешавад