Properti animation-delay menentukan kapan animasi akan dimulai. Ini memungkinkan animasi untuk memulai eksekusi beberapa saat setelah diterapkan, atau tampaknya telah memulai eksekusi beberapa saat sebelum diterapkan.

Nilai awal adalah ‘0s’, yang berarti bahwa animasi akan mulai diputar segera setelah diterapkan pada suatu elemen. Nilai waktu positif mewakili offset yang menentukan berapa lama penundaan ada di antara awal animasi (ketika animasi diterapkan ke elemen melalui properti animasi) dan ketika mulai dijalankan.

Anda juga dapat memberikan nilai animation-delay negatif. Nilai negatif, seperti ‘0s’, berarti animasi akan dieksekusi secara instan segera setelah diterapkan, tetapi secara otomatis dikembangkan oleh nilai absolut dari penundaan, seolah-olah animasi telah memulai waktu yang ditentukan di masa lalu, dan jadi sepertinya sudah mulai separuh siklus permainannya. Misalnya, jika Anda memberikan nilai penundaan animasi ‘-2s’, animasi akan mulai secara instan segera setelah diterapkan tetapi akan muncul seolah-olah itu sudah mulai 2s sebelum Anda menerapkannya.

Jika kerangka kunci animasi memiliki nilai awal tersirat, nilai diambil dari saat animasi dimulai, bukan waktu di masa lalu.

Anda dapat menentukan satu atau beberapa nilai penundaan animasi yang dipisahkan koma. Saat Anda memberikan daftar nilai yang dipisahkan koma, daftar ini biasanya dipetakan ke daftar nilai yang disediakan oleh properti terkait animasi lainnya, seperti properti animation-direction, animation-timing-function, dan animation-name diantara yang 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 penundaan animasi, maka nilai pertama menentukan penundaan animasi pertama dalam daftar nama animasi yang disediakan oleh nama animasi, dan penundaan kedua menentukan penundaan animasi kedua.

Properti penundaan-animasi biasanya ditentukan sebagai bagian dari properti singkatan animasi.

Official Syntax

  • Syntax:
  • Initial: 0s
  • Berlaku untuk: semua element; pseudo-elements  ::before dan ::after

 

Values

  • <time>:Nilai waktu <time> yang menentukan berapa lama penundaan ada di antara awal animasi (ketika animasi diterapkan ke elemen melalui properti ini) dan ketika mulai dijalankan. Penundaan ‘0s’ (nilai awal) berarti animasi akan dieksekusi segera setelah diterapkan.

    Penundaan negatif valid. Mirip dengan penundaan ‘0s’, itu berarti bahwa animasi dieksekusi segera, tetapi secara otomatis berkembang dengan nilai absolut dari penundaan, seolah-olah animasi telah memulai waktu yang ditentukan di masa lalu, dan sehingga tampaknya mulai setengah jalan melalui siklus bermainnya sudah. Jika kerangka kunci animasi memiliki nilai awal tersirat, nilai diambil dari saat animasi dimulai, bukan waktu di masa lalu.

Contoh

Contoh berikut menunda animasi bernama “bouncing” sampai setelah akhir animasi “shake”.