Mengapa Animasi CSS3 Saya Tidak Berfungsi dalam Safari?

Animasi CSS3 Tidak Dipaparkan Dengan Betul dalam Safari

Animasi CSS3 biasanya berfungsi dengan lancar merentas majoriti penyemak imbas moden. Walau bagaimanapun, anda mungkin menghadapi masalah apabila menggunakannya dalam Safari, mengakibatkan kekurangan pergerakan atau rendering yang salah. Satu kes sedemikian ditunjukkan di sini, di mana animasi lengan kekunci gagal dilaksanakan dengan betul dalam Safari.

Masalah: Animasi CSS3 Tidak Berfungsi dalam Safari

Kod yang disediakan terdiri daripada peraturan animasi CSS3 yang direka untuk memutar elemen, tetapi animasi ini tidak diiktiraf oleh Safari. Percubaan untuk mengubah saiz skrin mendedahkan kehadiran elemen dalam DOM, menunjukkan bahawa ia bukan struktur DOM yang menyebabkan isu.

Gelagat Khusus Safari dengan Bingkai Utama

Telah didapati bahawa Safari memerlukan penggunaan nilai peratusan penuh semasa menentukan Bingkai Utama. Dalam penyemak imbas lain, boleh diterima untuk menggunakan nilai peratusan yang disingkatkan, seperti "5%" atau "10%". Walau bagaimanapun, Safari memerlukan penggunaan eksplisit "5%" dan "100%" dalam konteks ini.

Penyelesaian: Menambah Nilai Peratusan Penuh

Dengan mengubah suai asal Kod CSS untuk memasukkan nilai peratusan penuh, animasi kini boleh berfungsi dengan betul dalam Safari. Kod yang dikemas kini di bawah menunjukkan perkara ini:

<br>@-webkit-keyframes keyarm {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }

Salin selepas log masuk

}

Nota Tambahan Berkenaan Safari 4

Adalah penting untuk ambil perhatian bahawa versi Safari yang lebih awal, seperti Safari 4, tidak menyokong sintaks "@keyframes" sama sekali. Oleh itu, adalah perlu untuk menggunakan awalan khusus vendor untuk animasi dalam Safari 4.

Atas ialah kandungan terperinci Mengapa Animasi CSS3 Saya Tidak Berfungsi dalam Safari?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!