animation-name сипаттамасы

animation-name сипаттамасы берілген элементке қолданылатын анимацияның (немесе анимациялардың) атауын белгілейді. Анимация атауы негізгі кадрларды анықтаған кезде @keyframes берілген атаумен бірдей болуы керек.

Синтаксис

селектор {
	animation-name: анимация атауы;
}

Мысал

Бұл мысалда анимацияның атауы move:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-name: move;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Сондай-ақ қараңыз

animation-duration сипаттамасы,
анимацияның ұзақтығын белгілейді
animation-delay сипаттамасы,
анимацияны орындау алдындағы кідірісті белгілейді
animation-timing-function сипаттамасы,
анимацияны орындау жылдамдығын белгілейді
animation-iteration-count сипаттамасы,
анимация қайталау санын белгілейді
animation-direction сипаттамасы,
анимация бағытын белгілейді
animation-fill-mode сипаттамасы,
анимация күйін белгілейді
animation-play-state сипаттамасы,
анимацияны кідіртуге мүмкіндік береді
animation сипаттамасы,
анимациялар үшін қысқартылған нұсқа
@keyframes командасы,
анимацияның негізгі кадрларын белгілейді
transition тегіс өтулер, элементтің үстіне курсорды апарғанда орындалатын анимация