Properti animation-direction

Properti animation-direction mengatur arah animasi. Secara default, animasi akan diulang hanya 1 kali dan kemudian kembali ke keadaan semula, kemudian, jika delay animation-delay ditetapkan, akan menunggu waktu yang ditentukan dan kemudian siklus akan dimulai dari awal.

Properti ini memungkinkan untuk mengubah perilaku ini, misalnya, sehingga animasi setelah selesai tetap di tempat dimana ia berakhir, dan tidak melompat kembali ke posisi awal.

Anda juga dapat mengatur perilaku seperti ini: animasi akan mencapai titik ekstrem dan kembali (seperti dalam transition). Lihat deskripsi di bawah.

Sintaksis

selector {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Nilai

Nilai	Deskripsi
`reverse`	Animasi akan diputar dalam arah terbalik.
`alternate`	Animasi akan diputar pertama dalam arah maju, kemudian dalam arah mundur (seperti transition).
`alternate-reverse`	Animasi akan diputar dari posisi akhir ke posisi awal dan kembali. Pada dasarnya ini adalah nilai `alternate` dan `reverse` dalam satu kemasan.
`normal`	Animasi akan diputar dari awal hingga akhir, dan setelah selesai akan melompat secara tiba-tiba kembali ke posisi awal.

Nilai default: normal.

Contoh

Sekarang elemen akan bergerak ke satu arah, dan kemudian kembali, karena nilai alternate ditetapkan. Pada saat yang sama, animation-duration memiliki nilai 3 detik dan ini berarti bahwa perpindahan "pergi" dan "pulang" akan berlangsung selama 3 detik:

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

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

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

Contoh

Sekarang elemen akan bergerak ke arah sebaliknya (seharusnya dari kiri ke kanan, tetapi akan dari kanan ke kiri):

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Contoh

Sekarang elemen akan bergerak bolak-balik, tetapi dalam arah terbalik (seharusnya mulai dari kiri, tetapi akan mulai dari kanan):

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

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

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

Lihat juga

properti animation-name,
yang menetapkan nama animasi
properti animation-duration,
yang menetapkan durasi animasi
properti animation-delay,
yang menetapkan penundaan sebelum eksekusi animasi
properti animation-timing-function,
yang menetapkan kecepatan eksekusi animasi
properti animation-iteration-count,
yang menetapkan jumlah iterasi animasi
properti animation-fill-mode,
yang menetapkan status animasi
properti animation-play-state,
yang memungkinkan untuk menjeda animasi
properti animation,
yang merupakan singkatan untuk animasi
perintah @keyframes,
yang menetapkan frame kunci animasi
transisi halus transition, yang merupakan animasi saat mengarahkan kursor ke elemen