#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.