Mengapa Animasi CSS Berkelip pada WebKit iPhone, dan Bagaimana Saya Boleh Membetulkannya?

Animasi CSS pada iPhone WebKit Menyebabkan Berkelip

Dalam URL yang disediakan, pengguna menghadapi masalah kelipan apabila menggunakan animasi CSS pada halaman web. Pembangun web menunjukkan bahawa mereka menggunakan animasi WebKit berikut:

• '-webkit-transition': 'none'
• '-webkit-transition': 'semua 0.2s mudah- keluar'
• '-webkit-transform': 'terjemah(XXpx, XXpx)'

Walau bagaimanapun, animasi ini menghasilkan kelipan apabila elemen masuk ke tempatnya selepas menatal. Selain itu, apabila butang "Main semula" diklik, latar belakang aksesori dan dompet bertukar menjadi putih semasa pistol bergerak masuk.

Penyelesaian:

Untuk menyelesaikannya isu yang berkelip, pembangun web menambah CSS berikut hartanah:

• -webkit-backface-visiblity
• -webkit-perspective: 1000

Sifat ini membantu menghilangkan kelipan.

'-webkit-backface-visibility: hidden;' harta menghalang bahagian belakang elemen daripada dipaparkan, yang boleh menyebabkan kelipan semasa animasi. '-webkit-perspective: 1000;' hartanah menambah perspektif kepada elemen, mencipta ilusi kedalaman dan mengurangkan kesan kelipan.

Dengan menggabungkan sifat CSS ini, kelipan yang dikaitkan dengan animasi CSS berkurangan dengan ketara, menghasilkan pengalaman pengguna yang lebih lancar.

Atas ialah kandungan terperinci Mengapa Animasi CSS Berkelip pada WebKit iPhone, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!