【CSS】ホバー時に背景色が左から右へ流れるアニメーション実装方法（円形）

1 概要
2 コード
3 解説

概要

今回はCSSで↓のようなアニメーションを実装する方法を紹介します。

コード

結論から言うと、↓のように書けば実装できます。

HTML サンプル

<body>
    <div class="circle"></div>
</body>

CSS サンプル

.circle{
    position: absolute;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    border-radius: 50%;
    overflow: hidden;
}

.circle::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all 0.6s ease 0s;
    background-color: aqua;
}

.circle:hover::before{
    width: 100%;
}

解説

部分ごとに解説していきます。

円自体の設定

.circle{
    position: absolute;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    border-radius: 50%;
    overflow: hidden;
}

border-radius: 50%　で対象要素の形を円にしています。
overflow: hidden　は「はみ出した部分を隠す」という設定をしています。
これがないと背景色（今回でいうと水色）の形が四角形になり、円と合わなくなります。
気になる方はこの部分のコードを消してみて動きを確認してみてくださいね。

背景色となる部分の設定

.circle::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all 0.6s ease 0s;
    background-color: aqua;
}

擬似要素を使用して、背景色部分の要素を作成します。
ホバー前は背景色の部分は見えなくて良いためwidth: 0;　を指定します。
transition: 　でアニメーションの速さを指定。

背景色となる部分のホバー時の設定

.circle:hover::before{
    width: 100%;
}

ホバー時に擬似要素の長さを100%にする。

以上、ホバー時に背景色が左から右へ流れるアニメーション実装方法でした。
円に対してのアニメーション実装が意外と苦戦したので、参考にしていただければ幸いです。