ここでは、スピン アニメーションが機能しない問題に焦点を当てた、いくつかのタイトル オプションを示します。 シンプル＆ダイレクト

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

Q: 最新の Chrome を使用しても CSS3 スピン アニメーションを動作させることができないのはなぜですか? ?

A: CSS3 アニメーションを利用するには、初期設定に加えてアニメーション キーフレームを定義する必要があります。

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

CSS3 アニメーションは、要素のスタイルが時間の経過とともにどのように変化するかを指定するキーフレームを使用して実現されます。 CSS3 アニメーションを使用するには、アニメーションのタイミングとキーフレームの両方を定義する必要があります。

スピン アニメーションのキーフレームの定義

スピン アニメーションを作成するには、要素をその位置から徐々に回転させるキーフレームを定義する必要があります。始点から終点まで。これを行うには、@keyframes ルールを使用します。

例を示します:

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

このアニメーション キーフレームは、要素を 0 度から 360 度まで回転させ、スピンを作成します。アニメーション。

アニメーションでのキーフレームの使用

アニメーション キーフレームを定義したら、HTML 要素のアニメーション宣言でそれらを使用できます。

<code class="css">div {
    /* Animation timing settings */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}</code>

アニメーションのタイミングとキーフレーム定義を組み合わせることで、機能する CSS3 スピン アニメーションが完成しました。

以上がここでは、スピン アニメーションが機能しない問題に焦点を当てた、いくつかのタイトル オプションを示します。 シンプル＆ダイレクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。