Properti animation-direction menentukan apakah animasi harus diputar terbalik pada beberapa atau semua siklus atau iterasi.

Anda dapat menentukan satu atau beberapa nilai animation-direction yang dipisahkan koma. Saat Anda memberikan daftar nilai yang dipisah koma, daftar ini biasanya dipetakan ke daftar nilai yang disediakan oleh properti terkait animasi lainnya, seperti penundaan animasi, fungsi pengaturan waktu animasi, dan properti nama animasi, antara lain . Setiap daftar nilai dalam properti ini diperlakukan seperti array, di mana setiap nilai dalam daftar nilai memiliki indeks sendiri. Kemudian, setiap nilai dalam daftar nilai dipetakan ke nilai yang sesuai dengan indeks yang sama dalam daftar yang disediakan di properti lainnya.

Misalnya, jika Anda memberikan dua nilai animation-direction, maka nilai pertama menentukan animation-direction dari animasi pertama dalam daftar nama animasi yang diberikan oleh nama-animasi, dan arah kedua menentukan arah animasi kedua.

Properti animation-direction berguna dan biasanya digunakan bersama dengan properti animation-iteration-count. Yang terakhir menentukan berapa kali siklus animasi harus diulang sebelum animasi berakhir, dan ketika siklus diulang lebih dari sekali, akan berguna untuk memungkinkan animasi untuk bermain dari ujung kembali ke awal untuk menghindari “melompat” perilaku antar siklus. Lihat entri properti animation-iteration-count untuk detail, dan bagian demo langsung di bawah ini.

Properti animation-direction biasanya ditentukan sebagai bagian dari properti singkatan animasi.

Ketika animasi diputar terbalik, fungsi pengaturan waktu juga terbalik. Sebagai contoh, ketika diputar secara terbalik fungsi timing animasi yang mudah muncul akan tampak sebagai animasi yang mudah keluar.

Official Syntax

  • Syntax:
  • Berlaku untuk: semua element; pseudo-elements¬† ::before dan ::after

 

Values

  • normal: Semua iterasi animasi dimainkan seperti yang ditentukan. Ini berarti bahwa ketika siklus animasi pertama selesai, animasi akan “melompat” kembali ke awal dan mulai lagi dari sana.
  • reverse: Semua iterasi animasi diputar dalam arah terbalik dari cara mereka ditentukan. Artinya, animasi akan melanjutkan dari belakang ke belakang ke awal, seolah-olah nilai keyframe ditentukan dalam urutan terbalik.
  • alternate: Iterasi siklus animasi yang jumlah ganjil dimainkan dalam arah normal, dan iterasi siklus animasi yang bahkan hitungan dimainkan dalam arah sebaliknya. Ini berarti bahwa siklus pertama akan dimainkan dari awal hingga akhir, kemudian siklus kedua akan diputar dari ujung kembali ke awal, kemudian siklus ketiga akan diputar dari awal hingga akhir, dan seterusnya.
  • alternate-reverse: Iterasi siklus animasi yang jumlah ganjil dimainkan di arah sebaliknya, dan iterasi siklus animasi yang bahkan hitungan dimainkan dalam arah yang normal. Siklus pertama dimainkan dari ujung ke belakang ke awal, lalu siklus kedua dari awal ke akhir, lalu ke siklus ketiga dari ujung ke belakang ke awal, dan seterusnya.

Untuk tujuan menentukan apakah iterasi itu genap atau ganjil, iterasi mulai menghitung dari 1.

Examples

Berikut ini menentukan arah animasi pada elemen yang animasinya diatur untuk mengulangi tanpa batas, memungkinkan transisi yang lebih mulus antara siklus.