Atribut animation CSS

Definisi dan penggunaan

animation Properti adalah properti singkat yang digunakan untuk mengatur enam properti animasi:

Keterangan:Selalu tentukan animation-duration Jika tidak didefinisikan properti, durasi akan 0 dan animasi tidak akan dimainkan.

Lihat pula:

Panduan CSS3:Animasi CSS

Referensi DOM HTML:animation atribut

Contoh

Gunakan properti singkat untuk mengikat animasi dengan elemen div:

div
{
animation:mymove 5s infinite;
}

Coba Sendiri

Syntaks CSS

animation: name duration timing-function delay iteration-count direction;
Nilai Deskripsi
animation-name Menentukan nama keyframe yang harus diikat ke pemilih.
animation-duration Menentukan waktu yang dihabiskan untuk menyelesaikan animasi, dalam detik atau milidetik.
animation-timing-function Menentukan garis waktu animasi.
animation-delay Menentukan jeda sebelum animasi mulai.
animation-iteration-count Menentukan berapa kali animasi harus diputar.
animation-direction Menentukan apakah animasi harus diputar balik secara bergantian.
animation-fill-mode Menentukan nilai yang diterapkan di luar waktu eksekusi animasi.
animation-play-state Menentukan apakah animasi sedang berjalan atau dihentikan.

Detil Teknik

Nilai Default: none 0 ease 0 1 normal
Inheritance: no
Versi: CSS3
Syntaks JavaScript: object.style.animation="mymove 5s infinite"

Bacaan Browser

Dukungan Browser

Angka yang ditunjukkan di tabel adalah versi pertama browser yang mendukung atribut ini dengan prefix awal.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-