Mengapa Animasi CSS3 Saya Tidak Berfungsi dalam Safari?-tutorial css-php.cn

Mengapa Animasi CSS3 Saya Tidak Berfungsi dalam Safari?

Patricia Arquette

Lepaskan： 2024-11-29 21:04:11

asal

898 orang telah melayarinya

Why Doesn't My CSS3 Animation Work in 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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

HTML

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

Salin selepas log masuk

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); }
}

Salin selepas log masuk

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); }
}

Salin selepas log masuk

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!