【CSS Hover】CSSだけで、円のアニメーションを表現する

CSSだけで、円のアニメーションを表現する

今回のこの記事のゴール
要素のHover時に、動く円を再現できるようになる
ことです

以下が、デモになります

See the Pen Circle Animation by Kazuhito Nakayama (@kazuhito-nakayama) on CodePen.

ポイントは、
@keyframes
と
border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;

の部分。

@keyframesとは,
animationプロパティとセットで使うプロパティで、
animationは「設定」、
@keyframesは「動き」を形作ります。

今回では、
circle:hoverセレクターに対して、

border-animation（animation-name:適用させたい動きの名前）、
3s(animation-duration：アニメーション一回分の時間の長さ)と、
infinite(animation-iteration-count：アニメーションの繰り返し回数を指定する)、
liner(animation-timing-function：アニメーションのタイミング・進行割合)

を定義しています。

その上で、@keyframes上で、transformプロパティを用いて、３６０回転のバリューを設定しているので、永遠にぐるぐる楕円が回転し続けるのです

詳しいanimationプロパティ
https://sterfield.co.jp/designer/css3%E3%81%AEanimation%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%82%89%E4%BA%88%E6%83%B3%E4%BB%A5%E4%B8%8A%E3%81%AB%E7%B0%A1%E5%8D%98%E3%81%A0%E3%81%A3%E3%81%9F%EF%BC%81/

また、

CSS

border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;

こちらのコードについては、「え、こんなborder-radiusの書き方あるんだ！」と驚かれる方も中にはいらっしゃるかと思います。
しかし、不規則な丸を描く際には、このような記述方法も用いたりします！
この書き方はつまり、

CSS

border-top-left-radius: 40% 30%;
border-top-right-radius: 40% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 40% 50%;

と同義で、それぞれの四辺に対して、楕円形を描くように角をborder-radiusで表現しているのです

参考

webクリエイターボックス
https://www.webcreatorbox.com/tech/border-radius

HPコード
https://haniwaman.com/css-animation/