Mengapa Peralihan Transformasi Webkit Saya Berkelip-kelip, dan Bagaimana Saya Boleh Membetulkannya?

Peralihan Transformasi Webkit Berkelip dalam Webkit

Apabila menggunakan transformasi webkit dalam pelayar webkit, isu kelipan mungkin berlaku sejurus sebelum peralihan berlaku . Ini boleh menyusahkan, menghalang aliran lancar animasi anda.

Kelipan timbul daripada lonjakan sedikit pada kedudukan elemen sebelum peralihan bermula. Untuk menyelesaikan masalah ini, gunakan langkah berikut:

1. Kemas kini CSS: Tambahkan sifat CSS berikut pada elemen yang mengalami kelipan:

-webkit-backface-visibility: hidden;

Sifat ini memaksa penyemak imbas untuk mengabaikan muka belakang elemen, menghalangnya daripada berkelip semasa peralihan.

2. Nilai Semula Isu: Setelah anda menggunakan pengubahsuaian CSS ini, semak semula animasi dalam penyemak imbas webkit anda. Perhatikan jika kelipan telah dihapuskan. Jika tidak, cuba lumpuhkan pecutan perkakasan pada elemen:

-webkit-transform: translate3d(0, 0, 0);

3. Nilai dalam Chrome lwn Safari: Ambil perhatian bahawa isu kelipan mempengaruhi Safari dan bukan Chrome. . Jika anda mengalami kelipan dalam Chrome, periksa kod anda untuk mencari punca lain yang berpotensi.

Atas ialah kandungan terperinci Mengapa Peralihan Transformasi Webkit Saya Berkelip-kelip, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!