Contoh
Melakukan animasi sekali, kemudian melakukan animasi mundur:
div {
-webkit-animation-direction: alternate; /* Chrome, Safari,
Opera */
animation-direction: alternate;
} Cobalah sendiri " Definisi dan Penggunaan
Properti animasi-arah mendefinisikan apakah animasi harus bermain di arah sebaliknya atau dalam siklus alternatif.
| nilai default: | normal |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.animationDirection="reverse" 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-direction | 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-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| normal | nilai default. animasi harus dimainkan seperti biasa | Mainkan " |
| reverse | animasi harus bermain di arah sebaliknya | Mainkan " |
| alternate | Animasi akan dimainkan seperti biasa setiap kali aneh (1,3,5,etc..) dan di arah sebaliknya setiap bahkan waktu (2,4,6,etc...) | Mainkan " |
| alternate-reverse | Animasi akan dimainkan di arah sebaliknya setiap kali aneh (1,3,5,etc..) dan dalam arah normal setiap bahkan waktu (2,4,6,etc...) | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Catatan: "reverse" dan "alternate-reverse" nilai tidak didukung di Safari.
Pages terkait
CSS3 tutorial: CSS3 Animasi
Referensi HTML DOM: animationDirection property