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

CSS3 スピン アニメーション

提供された HTML コードで、さまざまな CSS3 アニメーション プロパティを div 要素に適用しました。ただし、Chrome の最新の安定リリースを使用しているにもかかわらず、アニメーションは機能していないようです。

CSS3 アニメーションについて

CSS3 アニメーションを効果的に使用するには、特定の一連の手順に従う必要があります。

1. アニメーション プロパティの定義: 要素のアニメーション プロパティ (animation-name、animation-duration、animation-iteration-count、animation-timing) を定義する必要があります。
2. アニメーション キーフレームの定義 (コードにありません): @keyframes ルールを使用して実際のアニメーション キーフレームを確立する必要があります。キーフレームは、アニメーション シーケンス中の特定のポイントで要素がどのように表示されるかを定義します。
3. ブラウザの互換性: 使用しているブラウザが CSS3 アニメーションをサポートしていることを確認してください。 Chrome を含む最近のブラウザのほとんどは、この機能をサポートしています。

解決策: キーフレームの追加

コードでは、アニメーション プロパティは定義されていますが、アニメーション キーフレームは定義されていません。これを解決するには、次のキーフレーム ルールを追加します。

<code class="css">@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}</code>

このキーフレーム ルールは、アニメーション中に要素が 0 度から 360 度まで回転することを指定します。

Demo

キーフレーム ルールを追加すると、コードは次のようになります:

<code class="html"><div>
</div></code>

<code class="css">div {
    ... (same animation properties as before)
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}</code>

このコードは、div 要素のスピン アニメーションを生成する必要があります。

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