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

CSS3 アニメーションが Safari で正しく表示されない

CSS3 アニメーションは通常、最新のブラウザの大部分でシームレスに動作します。ただし、Safari で使用すると、動きが欠けたり、レンダリングが正しく行われなかったりする問題が発生する可能性があります。ここでは、そのようなケースの 1 つを示します。ここでは、Safari 内でキー アーム アニメーションが適切に実行されません。

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

提供されたコードは次のとおりです。要素を回転するように設計された CSS3 アニメーション ルールですが、このアニメーションは Safari では認識されません。画面のサイズを変更しようとすると、DOM 内に要素が存在することが明らかになり、問題の原因となっている DOM 構造ではないことがわかります。

キーフレームを使用した Safari の特定の動作

Safari ではキーフレームを定義するときに完全なパーセント値を使用する必要があることが判明しました。他のブラウザでは、「5%」や「10%」などの省略されたパーセント値を使用できます。ただし、Safari では、このコンテキストで「5%」と「100%」を明示的に使用する必要があります。

解決策: 完全なパーセンテージ値を追加する

元の値を変更することにより、 CSS コードに完全なパーセント値を含めると、アニメーションが Safari で正しく機能するようになりました。以下の更新されたコードは、これを示しています。

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

ログイン後にコピー

}

Safariに関する追加注意事項4

Safari 4 などの Safari の以前のバージョンは、「@keyframes」構文を完全にはサポートしていないことに注意することが重要です。したがって、Safari 4 のアニメーションにはベンダー固有のプレフィックスを使用する必要があります。

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