無限の CSS 回転アニメーション: アイコンを連続的に回転させる方法
CSS を使用してアイコンの無限の回転を実現するには、CSS アニメーションの組み合わせを使用します。そしてキーフレームが必要です。次の手順は、解決策の概要を示しています。
1.キーフレームの追加:
2 つのキーフレームを定義します。1 つは回転の開始 (0 度) で、もう 1 つは回転の終了 (360 度) です。これにより、スムーズな移行が保証されます。
<code class="css">@-webkit-keyframes rotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } }</code>
2.アニメーションの適用:
CSS アニメーション プロパティを使用して、作成したキーフレーム アニメーションを回転したい要素に適用します。このプロパティには、キーフレーム名、期間、ループ動作 (無限) の 3 つのパラメーターが必要です。
<code class="html"><div class="rotating"> Rotate </div></code>
<code class="css">.rotating { -webkit-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; }</code>
3.ブラウザの互換性に関する問題の修正:
さまざまなブラウザ間の互換性を確保するために、WebKit ベースのブラウザ (Chrome、Safari) のベンダー プレフィックスと、他のブラウザの標準プロパティが含まれています。
<code class="css">.rotating { -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */ -moz-animation: rotating 2s linear infinite; /* Firefox */ -ms-animation: rotating 2s linear infinite; /* IE */ animation: rotating 2s linear infinite; /* Standard */ }</code>
これらの手順に従うことで、CSS を使用してアイコンやその他の要素の無限回転アニメーションを簡単に作成できます。
以上がアイコンの無限の CSS 回転アニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。