Contoh
Mengikat animasi ke <div> elemen, menggunakan properti singkat:
div
{
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
Cobalah sendiri " Definisi dan Penggunaan
Properti animasi adalah properti singkatan untuk delapan sifat animasi:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Note: Selalu menentukan properti animasi durasi, jika durasi adalah 0, dan tidak akan pernah dimainkan.
| nilai default: | none 0 ease 0 1 normal none running |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.animation="mymove 5s infinite" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, moz, atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| animation | 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- |
CSS Syntax
animation:name duration timing-function delay iteration-count
direction fill-mode play-state;Nilai properti
| Nilai | Deskripsi |
|---|---|
| animation-name | Menentukan nama keyframe yang Anda ingin mengikat pemilih |
| animation-duration | Menentukan berapa detik atau milidetik animasi dibutuhkan untuk menyelesaikan |
| animation-timing-function | Menentukan kurva kecepatan animasi |
| animation-delay | Menentukan penundaan sebelum animasi akan mulai |
| animation-iteration-count | Menentukan berapa kali animasi harus dimainkan |
| animation-direction | Menentukan apakah atau tidak animasi harus bermain secara terbalik pada siklus alternatif |
| animation-fill-mode | Menentukan nilai apa yang diterapkan oleh animasi luar waktu yang mengeksekusi |
| animation-play-state | Menentukan apakah animasi sedang berjalan atau berhenti |
| initial | Set properti ini ke nilai default. Baca tentang awal |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Pages terkait
CSS3 tutorial: CSS3 Animasi
Referensi HTML DOM: animation property