CSS3 スピン アニメーション

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

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

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

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

ソリューションを説明するデモは次のとおりです。

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);
  }
}

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