animation-name | Codingku

Properti CSS animation-name menetapkan satu atau lebih animasi untuk diterapkan pada suatu elemen.

Setiap nama adalah aturan kunci @keyframes yang menetapkan nilai properti untuk urutan animasi.

Syntax

animation-name: nama-keyframes | none | initial | inherit;

object.style.animationName="myNEWmove"

nama-keyframes adalah nama @keyframes yang memberikan nilai properti untuk animasi.

Jika nama tidak cocok dengan aturan kunci apapun, tidak ada properti yang akan dianimasikan dan animasi tidak akan dijalankan.

Mengatur properti ke none secara eksplisit menonaktifkan animasi.

Jadi, jika properti ini mengandung nilai none, tidak ada animasi yang dieksekusi bahkan jika ada @keyframes dengan nama itu.

default animation-name: none;

Jika tidak ada nama animasi yang ditentukan, tidak ada animasi yang dimainkan.

animation-name: fadeIn;

Jika nama ditentukan, keyframes yang cocok dengan nama itu akan digunakan.

Contohnya, nama animasifadeIn seperti berikut:

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

animation-name: moveRight;

Contoh lainnya: nama animasi moveRight:

@keyframes moveRight {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100px);
	}
}

Tabel berikut ini menunjukkan tingkat dukungan browser untuk fitur animasi yang disediakan oleh Caniuse.com.