Properti animation

Properti animation adalah properti singkatan untuk animasi, memungkinkan untuk mengatur semua properti untuk animasi secara bersamaan: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Urutan nilai tidak penting, waktu eksekusi animasi animation-duration harus berada sebelum penundaan animation-delay. Hanya properti animation-name dan animation-duration yang wajib.

Properti juga dapat menerima nilai none, yang menonaktifkan animasi sama sekali. Nilai ini adalah nilai default.

Sintaksis

selector {
	animation: nilai;
}

Contoh

Dalam contoh ini, akan ada penundaan selama 3 detik sebelum animasi (sebelum setiap pemutaran baru), dan kemudian animasi akan diputar selama 6 detik:

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

Contoh . Masalah yang Mungkin Terjadi

Animasi yang ditulis dalam bentuk singkat mungkin tidak bekerja karena namanya. Mari kita perhatikan animasi berikut:

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

Perhatikan, saya menggunakan nama animasi reverse. Sekilas, semuanya baik-baik saja, tetapi animasi tidak bekerja, karena reverse adalah kata kunci yang valid untuk properti animation-direction.

Animasi juga tidak akan bekerja jika menggunakan kata kunci lain dalam nama saat menggunakan bentuk singkat. Tapi semuanya bekerja baik saat menggunakan bentuk deskripsi "lengkap".

Kata kunci-nilai animation-direction yang dapat merusak animasi, termasuk juga kata kunci yang terkait dengan fungsi pelancaran (timing functions), serta infinite, alternate, running, paused dan sebagainya.

Lihat juga

perintah @keyframes,
yang menentukan frame kunci animasi
transisi halus transition, yang merupakan animasi saat hover pada elemen