animation-play-state

Properti CSS animation-play-state memungkinkan kamu untuk menentukan apakah animasi berjalan atau dihentikan sementara.

Animasi yang sedang berjalan dapat di jeda dengan mengatur properti animation-play-state ke paused.

Untuk terus menjalankan animasi, properti dapat diatur ke running.

Properti ini dapat digunakan oleh skrip (seperti Javascript) untuk menjalankan/menjeda animasi atau untuk mengetahui keadaan animasi saat ini (misal, sedang berjalan atau dijeda).

Animasi yang dijeda akan terus menampilkan nilai animasi saat ini dalam keadaan statis, seolah-olah waktu animasi itu konstan.

Ketika animasi yang dijeda dilanjutkan, dimulai kembali dari nilai saat ini, tidak harus dari awal animasi.

default animation-play-state: running;

Jika animation-play-state dan animation-name didefinisikan, animasi akan mulai bermain secara otomatis.

animation-play-state: paused;

Animasi ini disetel “paused” di keyframes pertama .

Ini berbeda dengan tidak memiliki animation-play-state atau animation-name sama sekali. Jika animasi dijeda, gaya yang diterapkan adalah keyframes pertama , dan tidak style default.

Dalam contoh ini, kotak terlihat secara default, tetapi pada keyframe pertama dari fadeAndMove , opacity diatur ke 0 . Saat dijeda, animasinya akan " macet " pada keyframe pertama ini, dan karenanya tidak akan terlihat.

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

See the Pen Contoh #1 animation-play-state by Codingku (@codingku) on CodePen.

Browser Support

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