純粋な CSS を使用して連続的に回転するアニメーションを作成するにはどうすればよいですか?

CSS を使用した無限回転アニメーション

リクエスト:

純粋な使用で読み込み中のアイコンを無限に回転させますCSS.

コード:

<code class="css">#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}</code>

問題:

指定されたコードは回転アニメーションを開始しません

解決策:

CSS を使用して連続回転を実現するには、アニメーションを使用する必要があります。この場合、@keyframes ルールを使用してアニメーションを定義し、それを適用するアニメーション CSS プロパティを使用します。

更新されたコード:

<code class="css">@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

この更新されたコード2 秒間の 360 度の回転で構成される回転アニメーションを定義します。反復回数を無限に設定すると、アニメーションが無限に繰り返されます。

以上が純粋な CSS を使用して連続的に回転するアニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。