Properti animation-duration digunakan untuk menentukan berapa lama siklus animasi harus berlangsung.
Waktu ditentukan dalam detik atau milidetik, dan pada awalnya diatur ke ‘0s’, yang berarti bahwa animasi terjadi secara instan.
Kalian dapat menentukan satu durasi atau beberapa durasi yang dipisahkan koma. Saat Kalian memberikan daftar durasi 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 Kalian memberikan dua nilai animation-duration, maka nilai pertama menentukan animation-duration dari animasi pertama dalam daftar nama animasi yang disediakan oleh nama animasi, dan durasi kedua menentukan animation-duration kedua.
Jika nilai animation-duration adalah ‘0s’, seperti nilai awal, kerangka kunci dari animasi tidak berpengaruh, tetapi animasi itu sendiri masih terjadi secara instan. Artinya, mode isian-animasi berlaku seperti biasa, mengisi ke belakang atau ke depan sebagaimana mestinya, dan acara animasi masih menyala.
Syntax:
animation-duration: <time>
Values:
<time>: Nilai <time> yang menentukan menentukan lama waktu yang dibutuhkan animasi untuk menyelesaikan satu siklus. Nilai ‘0s’ adalah nilai default, dan itu berarti bahwa efek animasi terjadi secara instan dan dengan demikian kerangka kunci tidak berpengaruh. Nilai negatif tidak diizinkan dan menjadikan pernyataan itu tidak valid.
Contoh:
Berikut ini adalah semua nilai animation-duration yang valid:
animation-duration: 1s; animation-duration: .3s; animation-duration: .6s, 1.5s, 2s; animation-duration: .3s, .6s, .9s;
Yang berikut ini menentukan animation-duration dari dua animasi yang diterapkan pada suatu elemen:
.element {
animation-name: rotate, fall;
animation-duration: .6s, .9s;
animation-timing-function: ease-in-out, ease-out;
}
@keyframes rotate {
}
@keyframes fall {
}