Property nama-animasi digunakan untuk menentukan satu atau lebih animation-name yang ditentukan oleh aturan @keyframes, yang akan diterapkan ke elemen yang dipilih.
Aturan @keyframes menentukan nilai Property yang akan dianimasikan di atas urutan kerangka kunci animasi.
Kalian dapat menentukan satu animation-name di animation-name atau daftar nama yang dipisahkan koma. Setiap nama milik pengidentifikasi bingkai @. Jika animation-name yang ditentukan menggunakan animation-name tidak ada, tidak ada animasi yang diterapkan.
Saat Kalian memberikan daftar animation-name yang dipisah koma, daftar ini biasanya dipetakan ke daftar nilai yang disediakan oleh Property terkait animasi lainnya, seperti penundaan animasi, fungsi pengaturan waktu animasi, dan Property durasi animasi, di antara lainnya. Setiap daftar nilai dalam Property 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 Property lainnya.
Property nama-animasi biasanya ditetapkan sebagai bagian dari Property singkatan animasi.
Animasi yang diterapkan pada suatu elemen dapat dikontrol menggunakan Property animasi yang berbeda, termasuk berapa kali animasi iterate, apakah itu bergantian atau tidak antara nilai awal dan akhir, dan apakah animasi harus berjalan atau dihentikan sementara. Animasi juga dapat menunda waktu mulainya.
Syntax:
animation-name: <single-animation-name># /* dimana */ <single-animation-name> = none | <user-ident>
Values:
none: Tidak ada kerangka kunci yang ditentukan sama sekali, sehingga tidak akan ada animasi. Properti animasi lainnya yang ditentukan untuk animasi ini tidak berpengaruh.
<user-ident>: Animasi akan menggunakan bingkai kunci dengan nama yang ditentukan oleh <user-ident>, jika ada. Jika tidak ada kerangka kunci seperti itu, tidak ada animasi.
Contoh:
animation-name: bounce; animation-name: shake, jump; animation-name: some-animation-name;
Berikut ini berlaku animasi untuk elemen dan mengontrolnya menggunakan properti animasi lainnya. Nama animasi cocok dengan nama animasi yang ditentukan menggunakan aturan @keyframes. Elemen .box tidak akan dianimasikan karena, dalam kode ini, tidak ada animasi yang cocok dengan nama animasi yang disediakan di properti nama-animasi. Elemen .animated akan memiliki dua animasi yang diterapkan padanya, masing-masing dengan durasi yang ditentukan.
.element {
animation-name: bounce;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.box {
animation-name: jump;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
.animated {
animation-name: bounce, change-bg-color;
animation-duration: 3s, 2s;
/* ... */
}
@keyframes change-bg-color {
from {
background-color: red;
}
to {
background-color: blue;
}
}
@keyframes bounce {
from {
top: 100px;
animation-timing-function: ease-out;
}
25% {
top: 50px;
animation-timing-function: ease-in;
}
50% {
top: 150px;
animation-timing-function: ease-out;
}
75% {
top: 75px;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}