CSS でマウスオーバーで回転アニメする

※ これは 2020/04/10 時点の font awesome v5.13.0 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

CSS で下記のような回転アニメ・・・をカーソルがのっているときだけ行いたい

スポンサードリンク

というわけでやってみた！

HTML は ねこ のアイコン部分は font awesome を使ってこんな感じ

<p><i class="fas fa-cat fa-3x rotate-btn"></i>&nbsp;</p>

CSS は hover 属性付きで animation を指定しました

アニメーションのキーフレーム、長さ、繰り返し回数（永久）、変化関数を記述しています

.rotate-btn:hover {
  animation: rotation 4s infinite linear;
}

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

キーフレームは開始と終了時の状態だけ書きました

css だけでもだいぶできるようになっていますね