Artikel ini memanipulasi animasi CSS, khususnya menangani cabaran memulakan semula dan melambatkan animasi tanpa menggunakan JavaScript. Penulis menceritakan pengalaman mereka membina permainan CSS-Only Wolfenstein 3D yang diilhamkan oleh CSS, yang menonjolkan dua masalah animasi yang sangat rumit: mencetuskan animasi menembak senjata pada klik musuh dan melaksanakan gerakan perlahan dramatik untuk hit terakhir bos.

Isu teras berkisar di sekitar pengendalian pelayar negara -negara animasi. Hanya menambah atau mengubahsuai sifat animasi semasa animasi sudah berjalan tidak selalu dimulakan semula atau melambatkannya seperti yang diharapkan.

Masalah 1: Mainkan semula animasi

Penulis meneroka beberapa pendekatan untuk memainkan semula animasi:

• Kotak semak berbilang (tidak berkesan): Menggunakan kotak semak berasingan untuk setiap percubaan animasi gagal kerana CSS hanya meneruskan animasi yang sedia ada, tidak memulakannya semula.
• Pengklonan Animasi: Mewujudkan nama animasi yang berbeza ( spin1 , spin2 ) untuk setiap kerja pencetus, tetapi memerlukan pesanan CSS yang berhati -hati.
• Menambah Animasi: Menambah animasi yang sama beberapa kali ke harta animation-name juga berfungsi, tetapi boleh membawa kepada tingkah laku yang tidak dijangka dengan animation-fill-mode: forwards .

Takeaway utama ialah anda tidak boleh memulakan semula animasi CSS secara langsung; Anda mesti menambah yang baru.

Masalah 2: Gerakan perlahan

Hanya mengubah animation-duration sementara animasi sedang berjalan menghasilkan lompatan. Pelayar menggunakan tempoh baru dari permulaan animasi, bukan keadaan semasa.

Beberapa pendekatan diterokai:

• Perubahan animation-duration langsung (tidak berkesan): Menukar animation-duration -animasi menyebabkan gangguan visual.
• Menjeda dan menambahkan animasi yang lebih perlahan: menjeda animasi asal dan menambah yang lebih perlahan dengan titik permulaan yang sama masih membawa kepada melompat kerana titik jeda yang tidak dapat diramalkan.
• Menggunakan sifat tersuai: Kaedah yang lebih canggih menggunakan sifat tersuai ( --angle1 , --angle2 ) untuk mengesan kemajuan animasi dan peralihan dengan lancar antara animasi dengan tempoh yang berbeza. Walau bagaimanapun, ini memerlukan sokongan penyemak imbas untuk @property .
• Teknik "gear-shifting": Teknik pintar ini menggunakan div bersarang, masing-masing dengan animasinya, untuk beralih antara kelajuan animasi. Ia khusus animasi dan tidak umum dengan baik.
• Penyelesaian JavaScript: JavaScript menawarkan penyelesaian yang lebih mantap untuk mengendalikan kemajuan animasi dan peralihan dengan lancar antara kelajuan animasi yang berbeza, menawarkan fleksibiliti untuk animasi yang kompleks.

Artikel ini menyimpulkan dengan mengakui inspirasi dari projek-projek CSS yang lain dan memberikan gambaran menyeluruh tentang cabaran dan penyelesaian yang terlibat dalam memanipulasi animasi CSS. Penulis menggalakkan pembaca untuk meneroka contoh yang disediakan dan berkongsi pemikiran mereka.

Atas ialah kandungan terperinci Hacking CSS Animation State and Mainback Time. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!