CSS3 アニメーションが Safari で動作しないのはなぜですか?

CSS3 アニメーションが Safari で動作しない

CSS3 をサポートするすべてのブラウザで CSS3 を使用するアニメーションでいくつかの問題が発生しています。 Safari を除くすべてのデバイス。アニメーション コードは次のとおりです:

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

あなたが述べたように、これはSafari では動作せず、アニメーションでは何も起こりません。また、これも Safari でのみ、「key-arm」 div は画面のサイズを変更したときにのみ表示されます。 DOM には存在しますが、何らかの理由で表示されません。

何を間違えたのですか?

回答

問題は @keyframes にあります。 Safari 4 では、@keyframes はサポートされていません。同じページで @keyframes を使用して有効なアニメーションを作成できるため、これは奇妙です。

@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>

Safari 4 を使用している場合媒体 (jsFiddle など) で試してみると、アニメーションが機能しないことがわかります。

解決策

解決策が見つかりました。 Safari でキーフレームを使用する場合は、完全なパーセンテージを使用する必要があります:

これは機能しません:

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

これは動作します:

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

理由はわかりません 、でもそれがSafariの仕組みなのです！

以上がCSS3 アニメーションが Safari で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。