CSS3 スピン アニメーションが機能しない: キーフレームが見つからないのはなぜですか?

CSS3 スピン アニメーション: 機能しない理由

CSS3 スピン アニメーションがコード内で機能しないという問題が発生しました。トラブルシューティングを行う前に、CSS3 アニメーションの背後にある基本原理を理解することが重要です。

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

CSS3 アニメーションの力を活用するには、アニメーション キーフレームを定義することが不可欠です。 。キーフレームは、アニメーション要素がアニメーション全体のさまざまな時間間隔でどのように表示されるかを指定します。コード内で「spin」という名前のアニメーションを参照しましたが、これらのキーフレームは定義されていません。

公式 Mozilla 開発者ガイド (https://developer.mozilla.org/en-) を参照してください。 CSS アニメーション キーフレームの詳細については、US/docs/CSS/Tutorials/Using_CSS_animations) を参照してください。

実装

ここでは、スピン アニメーションをどのように実行できるかを示すためにキーフレームが追加されたスニペットを示します。効果的に実装されています:

HTML:

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

CSS:

<code class="css">div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}</code>

このコードでは、「from」を使用して「スピン」アニメーション キーフレームを定義しています。そして「to」セレクター。これらは、要素が 0 度の回転から開始し、アニメーション期間中に徐々に 360 度まで回転することを指定します。

このキーフレーム定義を組み込むことで、スピン アニメーションがコードで意図したとおりに機能できるようになります。 .

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