Mengapa Animasi CSS3 Saya Tidak Berfungsi dalam Safari?

Animasi CSS3 tidak berfungsi dalam Safari

Anda menghadapi beberapa isu dengan animasi yang menggunakan CSS3 dalam semua penyemak imbas yang menyokong CSS3 Ia berjalan dengan sempurna pada semua peranti kecuali Safari. Kod animasi anda adalah seperti berikut:

HTML

<div class="right">
    <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>

CSS

.landing .board .right {
    /* ... other styles ... */
}
.landing .board .right .key-arm {
    /* ... other styles ... */
}

/*=== Key Arm Animation ===*/
@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes keyarm {
    /* ... other keyframes ... */
}

@-ms-keyframes keyarm {
    /* ... other keyframes ... */
}

@-o-keyframes keyarm {
    /* ... other keyframes ... */
}

@keyframes keyarm{
    /* ... other keyframes ... */
}

.right .key-arm{
    /* ... other styles ... */
    -webkit-animation: keyarm 8s ease-in-out 0s infinite;
    -moz-animation: keyarm 8s ease-in-out 4s infinite;
    -ms-animation: keyarm 8s ease-in-out 4s infinite;
    -o-animation: keyarm 8s ease-in-out 4s infinite;
    animation: keyarm 8s ease-in-out 0s infinite;
}

Seperti yang anda nyatakan, ini Tidak berfungsi dalam Safari, tiada apa yang berlaku dalam animasi. Selain itu, juga hanya dalam Safari, div "lengan kunci" hanya muncul apabila anda mengubah saiz skrin! Ia wujud dalam DOM, tetapi atas sebab tertentu ia tidak muncul!

Apa yang anda buat salah?

Jawapan

Masalahnya ialah @keyframes. Dalam Safari 4, @keyframes tidak disokong. Ini pelik kerana pada halaman yang sama anda boleh menggunakan @keyframes untuk mencipta animasi yang sah!

Kod animasi yang menyokong @keyframes:

CSS

.board .rays{
    /* ... other styles ... */
}

.board .bottle{
    /* ... other styles ... */
}

/*=== Rays Animation ===*/
@-webkit-keyframes rays{
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rays{
    /* ... other keyframes ... */
}

.board .rays{
   -webkit-animation: rays 40s linear 0s infinite;
   -moz-animation: rays 40s linear 0s infinite;
   animation: rays 40s linear 0s infinite;
}

HTML

<div class="board">
    <div class="rays"></div>
    <div class="bottle"></div>
</div>

Jika anda menggunakan Safari 4 Cuba dalam medium (cth. dalam jsFiddle) dan anda akan mendapati bahawa animasi tidak berfungsi.

Penyelesaian

Menemui penyelesaiannya. Apabila menggunakan bingkai utama dalam Safari anda perlu menggunakan peratusan penuh:

Ini tidak akan berfungsi:

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

Yang ini akan:

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}

Tidak pasti mengapa , tetapi itulah cara Safari berfungsi!

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!