Bagaimanakah Saya Boleh Mengawal Gelagat Animasi CSS3 Selepas Selesai?

Mengawal Gelagat Tamat Animasi CSS3

Apabila mencipta animasi CSS3 yang menarik, selalunya perlu untuk mengawal tingkah laku mereka apabila selesai. Satu keperluan biasa ialah membekukan animasi pada bingkai terakhirnya.

Membekukan Animasi pada Bingkai Terakhir

Kod yang disediakan menunjukkan animasi empat bahagian yang diakhiri dengan mengeluarkan elemen sasaran dari skrin. Walau bagaimanapun, ia berulang kali kembali ke keadaan asalnya selepas pelaksanaan. Untuk menangani isu ini, kami boleh menggunakan sifat mod isian-animasi.

animation-fill-mode: forwards;

Dengan menetapkan sifat ini kepada ke hadapan, animasi akan kekal pada keadaan terakhir sebaik sahaja ia selesai. Elemen akan kelihatan beku pada bingkai terakhir (100%) animasi.

Sebagai alternatif, jika anda ingin mengalih keluar elemen daripada halaman sepenuhnya selepas animasi, anda boleh menggunakan pendekatan berikut:

-webkit-animation-end: animation_final_frame;

Di sini, animation_final_frame ialah nama fungsi CSS yang akan dilaksanakan apabila animasi tamat. Dalam fungsi itu, anda boleh menambah logik untuk mengalih keluar elemen daripada DOM menggunakan JavaScript atau jQuery.

Maklumat Mod Pengisian Animasi

Untuk butiran lanjut tentang mod-isi-animasi, rujuk kepada Pembangun Mozilla Rangkaian (MDN) atau rujuk senarai sokongan penyemak imbas di CanIuse.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Gelagat Animasi CSS3 Selepas Selesai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!