Mengapa animasi CSS3 saya tidak berfungsi dalam Safari?

Animasi CSS3 tidak berfungsi dalam Safari

Anda telah menghadapi masalah animasi CSS3 tidak berfungsi dalam Safari. Walaupun animasi berfungsi dengan baik dalam semua pelayar lain yang menyokong CSS3, ia tidak berfungsi dengan betul dalam Safari. Berikut ialah kod anda:

HTML

<div>

CSS

.landing .board .right {
    width: 291px;
    height: 279px;
    background: url('../images/landing/key-pnl.png');
    bottom: 16px;
    right: 250px;
    position: absolute;
}

.landing .board .right .key-arm {
    position: absolute;
    left: 44px;
    top: 18px;
    width: 41px;
    height: 120px;
}

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

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

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

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

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

.right .key-arm{
    -webkit-transform-origin: 12px 105px;
       -moz-transform-origin: 12px 105px;  
        -ms-transform-origin: 12px 105px;  
         -o-transform-origin: 12px 105px;  
            transform-origin: 12px 105px;  

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

Anda hadapi dalam Safari Masalahnya ialah seperti berikut:

• animasi tidak sah.
• div lengan kekunci hanya akan dipaparkan apabila skrin diubah saiz.

Dalam Safari, bingkai utama disokong, tetapi terdapat pengehadan. Anda mesti menggunakan peratusan penuh apabila mengisytiharkan bingkai utama. Contohnya, kod berikut tidak akan dijalankan dalam Safari:

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

Kod berikut akan dijalankan dalam Safari:

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

Jadi, untuk menyelesaikan masalah anda, anda perlu tukar kekunci keyarm Bingkai dikemas kini kepada:

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

Selepas mengemas kini, animasi anda akan berjalan seperti biasa dalam Safari.

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!