ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 アニメーションが Safari で動作しないのはなぜですか?
CSS3 アニメーションが Safari で動作しない
CSS3 アニメーションが Safari で動作しないという問題が発生しました。アニメーションは CSS3 をサポートする他のすべてのブラウザでは正常に動作しますが、Safari では正常に動作しません。コードは次のとおりです:
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; }
Safari で発生する問題は次のとおりです。次のように:
Safari ではキーフレームがサポートされていますが、制限があります。キーフレームを宣言するときは、完全なパーセンテージを使用する必要があります。たとえば、次のコードは Safari では実行されません:
@-webkit-keyframes keyarm { 0% { -webkit-transform: rotate(0deg); } 5% { -webkit-transform: rotate(-14deg); } 10% { -webkit-transform: rotate(0deg); } }
次のコードは Safari で実行されます:
@-webkit-keyframes keyarm { 0% { -webkit-transform: rotate(0deg); } 5% { -webkit-transform: rotate(-14deg); } 10% { -webkit-transform: rotate(0deg); } 100% { -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 サイトの他の関連記事を参照してください。