Hacking CSS Animation State and Mainback Time

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 akhir bos. Hanya menambah atau mengubahsuai sifat animasi semasa animasi sudah berjalan tidak selalu dimulakan semula atau melambatkannya seperti yang diharapkan. Animasi yang ada, tidak memulakannya semula. Name-Name Property juga berfungsi, tetapi boleh membawa kepada tingkah laku yang tidak dijangka dengan animation-fill-mode: Forwards .

Anda mesti menambah yang baru.

Masalah 2: Perlahan Perlahan

Hanya menukar Animation-Ruration manakala animasi sedang menjalankan hasil dalam lompatan bergelora. Penyemak imbas menggunakan tempoh baru dari permulaan animasi, bukan keadaan semasa.

Beberapa pendekatan diterokai:

• Animasi: menjeda animasi asal dan menambahkan yang lebih perlahan dengan titik permulaan yang sama masih membawa kepada melompat kerana titik jeda yang tidak dapat diramalkan. tempoh yang berbeza. Walau bagaimanapun, ini memerlukan sokongan penyemak imbas untuk @property .
• Teknik "gear-shifting": Teknik pintar ini menggunakan div bersarang, masing-masing dengan animasi, untuk menukar antara kelajuan animasi. Ia khusus animasi dan tidak umum dengan baik. Gambaran keseluruhan 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!