Property animation-fill-mode menentukan nilai-nilai apa yang diterapkan oleh animasi di luar waktu itu dijalankan. Lebih khusus, itu mendefinisikan gaya apa yang diterapkan pada elemen selama waktu tunda animasi, dan setelah animasi selesai dieksekusi.
Secara default, animasi tidak akan memengaruhi nilai Property antara waktu penerapannya (Property nama animasi diatur pada elemen, atau Property singkatan tulisan animasi) dan waktu dimulainya eksekusi (yang ditentukan oleh Property penundaan-animasi) ). Selain itu, secara default animasi tidak mempengaruhi nilai Property setelah animasi berakhir (akhir animasi ditentukan oleh durasi animasi dan Property animasi-iterasi-hitung). Property animation-fill-mode dapat menimpa perilaku ini.
Animasi CSS tidak akan memengaruhi elemen yang Kalian animasikan sampai kerangka kunci pertama “dimainkan”, lalu berhenti memengaruhinya setelah kerangka kunci terakhir selesai. Ini bisa membuat Kalian mengalami lompatan dan luka canggung. Kalian dapat menggunakan mode isi-animasi untuk memuluskan transisi ke gaya animasi dan di luarnya, ketika animasi selesai diputar.
Kalian dapat “menyiapkan” elemen Kalian untuk animasi dengan menerapkan gaya dari kerangka kunci animasi pertama ke elemen, sementara elemen menunggu animasi dimulai, yang biasanya selama waktu tunda animasi; yaitu, setelah Kalian menerapkan animasi ke elemen, tetapi sebelum itu benar-benar mulai diputar. Ini akan mencegah lompatan tiba-tiba dari keadaan awal elemen ke keadaan pertama dalam animasi, jika yang terakhir tidak sama dengan keadaan awal.
Kalian juga dapat membuat elemen tetap menerapkan gaya pada akhir animasi di bingkai kunci terakhir, setelah animasi selesai. Ini biasanya berguna untuk mencegah “lompatan” kembali ke gaya awal. Misalnya, jika Kalian menganimasikan bola dengan memindahkannya dari satu sisi ke sisi lain, Kalian mungkin menginginkannya tetap pada posisi baru, dan tidak melompat kembali ke posisi semula begitu animasi selesai. Di sinilah Property mode isi animasi juga membantu.
Kalian juga dapat melakukan kedua hal di atas: menerapkan gaya permulaan animasi ke elemen sebelum animasi dimulai (dalam waktu tunda) dan meminta elemen mempertahankan gaya akhir yang diterapkan oleh animasi ketika selesai. Ini biasanya lebih mudah dipahami dengan contoh langsung, jadi pastikan Kalian memeriksa bagian demo langsung di bawah untuk contoh langsung.
Kalian dapat menentukan satu atau beberapa nilai mode isi animasi yang dipisahkan koma. Saat Kalian memberikan daftar nilai yang dipisahkan koma, daftar ini biasanya dipetakan ke daftar animasi yang ditentukan menggunakan Property nama-animasi.
Misalnya, jika Kalian memberikan dua nilai mode isian-animasi, maka nilai pertama menentukan mode isian dari animasi pertama dalam daftar nama-nama animasi yang disediakan oleh nama-animasi, dan mode isian kedua menentukan mode isian dari yang kedua animasi.
Property mode isi animasi biasanya ditentukan sebagai bagian dari Property singkatan animasi.
Syntax:
animation-fill-mode: none | forwards | backwards | both
Values:
none: Animasi tidak memiliki efek ketika diterapkan tetapi tidak dieksekusi.
forwards: Setelah animasi selesai dieksekusi (telah memainkan jumlah waktu yang ditentukan oleh nilai animasi-iterasi-hitung) itu terus menerapkan nilai-nilai yang berakhir dengan iterasi lengkap terakhir dengan. Ini akan menjadi nilai yang ditentukan atau tersirat untuk frame kunci ‘100%’ atau ‘0%’ (lihat entri @keyframes untuk perincian), tergantung pada arah yang dieksekusi dalam iterasi lengkap terakhir (per arah animasi). Jika animasi tidak menyelesaikan seluruh iterasi (jika jumlah iterasi adalah 0 atau nilai kurang dari 1) nilai yang ditentukan atau tersirat untuk frame kunci ‘0%’ yang digunakan.
Perhatikan bahwa jika animasi-iterasi-hitung adalah nilai non-integer, animasi akan berhenti dieksekusi di tengah jalan melalui siklus animasinya, tetapi pengisian ke depan masih akan menerapkan nilai-nilai dari kerangka kunci ‘100%’, bukan nilai apa pun yang diterapkan pada saat animasi berhenti dijalankan.
backwards: Sebelum animasi mulai dieksekusi (selama periode yang ditentukan oleh penundaan animasi), animasi menerapkan nilai yang akan memulai iterasi pertama. Jika arah animasi normal atau alternatif, nilai yang ditentukan atau tersirat untuk kerangka kunci ‘0%’ digunakan; jika arah animasi terbalik atau terbalik-terbalik, nilai yang ditentukan atau tersirat untuk kerangka kunci ‘100%’ digunakan.
Perhatikan bahwa jika gaya kerangka kunci animasi yang pertama adalah sama dengan gaya elemen sebelum animasi diterapkan, maka nilai mundur mungkin tidak memiliki efek yang terlihat.
both: Efek dari forwards dan backwards berlaku.
Contoh:
Contoh berikut menerapkan dua mode isian berbeda ke dua animasi yang diterapkan pada suatu elemen, sehingga elemen mempertahankan gaya yang diterapkan di akhir kedua animasi, dan gaya pertama diterapkan oleh animasi pertama selama waktu tunda.
.element {
animation-name: first-animation, second-animation;
animation-duration: 2s, 4s;
animation-delay: 2s, 0s;
animation-fill-mode: both, forwards;
animation-timing-function: ease-in, steps(3, start);
/* ... */
}