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

CSS3 スピン アニメーション

アニメーション スタイルは正しく実装されましたが、キーフレームが定義されていないためアニメーションが機能しません。アニメーション。

CSS3 アニメーションでは、アニメーションの開始状態と終了状態を定義するためにキーフレームが必要です。

問題を解決するには、CSS コードにキーフレームを追加します。これにより、アニメーション中に要素がどのように変形するかが定義されます。その方法の例を次に示します。

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

これは、アニメーションを 0 度で開始し、360 度で終了するキーフレームを定義します。これらの値をカスタマイズして、目的のアニメーション効果を作成できます。

解決策を示すデモは次のとおりです:

<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>

これらの変更により、要素が回転するようになります。継続的に。 CSS3 アニメーションが機能するには、アニメーション スタイルとアニメーション キーフレームの両方を定義する必要があることに注意してください。

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