問題:
CSS を使用して読み込み中のアイコンを連続的に回転させたい、提供されたコード目的のアニメーションを生成できません。 CSS を使用してこの回転を効果的に実行するにはどうすればよいですか?
解決策:
CSS を使用して無限の回転を実現するには、次の手順を実行します:
CSS アニメーション キーフレームを追加:
ターゲット要素にアニメーションを適用します:
ベンダー プレフィックスを含める:
コード例:
<code class="css">@-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; }</code>
Html:
<code class="html"><div class="rotating" style="width: 100px; height: 100px; line-height: 100px; text-align: center;" >Rotate</div></code>
この改訂されたコードにより、無限の反復による要素の継続的な回転が保証され、前の試行で直面した問題が解決されます。
以上が無限の CSS 回転アニメーションを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。