Ciri animation

Ciri animation ialah ciri singkatan untuk animasi, membolehkan anda menetapkan semua ciri untuk animasi secara serentak: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Susunan nilai tidak penting, masa pelaksanaan animasi animation-duration semestinya diletakkan sebelum kelewatan animation-delay. Hanya ciri animation-name dan animation-duration adalah wajib.

Ciri juga boleh menerima nilai none, yang mematikan animasi sama sekali. Nilai ini ialah nilai lalai.

Sintaks

pemilih {
	animation: nilai;
}

Contoh

Dalam contoh ini, akan ada kelewatan sebelum animasi selama 3 saat (sebelum setiap mainan baru), dan kemudian animasi akan dimainkan selama 6 saat:

<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 Berlaku

Animasi, yang ditulis dalam bentuk ringkas, mungkin tidak berfungsi kerana namanya. Mari kita pertimbangkan animasi berikut:

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

Perhatikan, saya menggunakan nama animasi reverse. Pada pandangan pertama, semuanya kelihatan baik, tetapi animasi tidak berfungsi, kerana reverse ialah kata kunci yang sah untuk ciri animation-direction.

Juga, animasi tidak akan berfungsi apabila menggunakan bentuk ringkas dalam nama kata kunci lain. Tetapi semuanya berfungsi dengan baik apabila menggunakan bentuk "penuh" penerangan.

Kata kunci-nilai animation-direction, yang merosakkan animasi, termasuklah kata kunci yang berkaitan dengan fungsi pelicinan, dan juga infinite, alternate, running, paused dan sebagainya.

Lihat juga

arahan @keyframes,
yang menetapkan bingkai utama animasi
peralihan lancar transition, yang mewakili animasi ketika melayar di atas elemen