【CSS】マウスオーバーでborder-radiusがゆらゆらと変化するアニメーション

こんにちは、Ryohei（@ityryohei）です！

CSSでマウスオーバーした際にborder-radiusがゆらゆらと変化するアニメーションのご紹介です。アニメーションを設定した要素をマウスオーバーすると、要素の角がゆっくりと変化します。

下記は本記事でご紹介する内容のデモになります。「Hover Me!」と表示されたボタンにマウスカーソルを乗せてみてください。ゆっくりと要素が変化するかと思います。

See the Pen
wbVzpa by ryoy (@intotheprogram)
on CodePen.

border-radiusは要素の角を丸めるCSSのプロパティです。パネルやボタンといった要素のデザインを整えるのに使用されることが多いかと思いますが、設定次第では単純に角を丸めるだけではなく有機体のような独特な形を作ることもが可能となっています。

ただ、ユニークな形状を作る場合、複数の設定値が必要になり、計算するのが大変ですので、スタイルの定義と併せて私がよく使用するBorder Radiusのジェネレータもご紹介できればと思います。

では、解説していきます。

HTMLで簡単なボタンを作成する

最初に簡単なボタンを作成します。本記事では「button"」タグでHTMLを記述していますが、別のタグを使用していただいても大丈夫です。ご自身のサイトに使いやすい形で作成してください。

HTML

<button>Hover Me!</button>

以上でボタンの作成は完了です。

続いて作成したボタンにCSSでスタイルを定義していきます。

ボタンにスタイルとアニメーションを設定する

本記事でご紹介するアニメーションでは、CSSの@keyframesとanimationというプロパティを使って実現しています。@keyframesとanimationについては下記の記事で詳しくご紹介しています。詳しい内容につきましてはご参照いただければと思います。

【HTML/CSS】@keyframesとanimationの使い方

複雑なborder-radiusの作成は下記のジェネレーターがおすすめです。UIから形を指定することができますので、簡単にborder-radiusを作ることができます。

Fancy Border Radius

では、上記のジェネレーターを使ってborder-radiusを作成してみましょう。本記事では2種類のborder-radiusが必要になります。デフォルトの表示と動きの終点に設定する値です終点の値につきましては、buttonタグではなく@keyframesに指定しましょう。

CSS

//アニメーションの設定
@keyframes changeBorderRadius {
  100% {
    border-radius: 45% 55% 15% 85% / 70% 30% 70% 30%; 
  }
}

//「button」タグのスタイル
button {
  display: block;
  width: 300px;
  height: 70px;
  margin: 40px auto 0;
  color: #fff;
  font-size: 1.5em;
  background: #007db9;
  border-radius: 70% 30% 70% 30% / 40% 70% 35% 60%;
}

//「button」タグのhoverスタイル
button:hover {
  //keyframesで設定したアニメーションと設定を指定
  animation-name: changeBorderRadius;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

以上でCSSの記述は完了です。

冒頭でもご紹介したものですが、下記は本記事でご紹介した内容のデモになります。

See the Pen
wbVzpa by ryoy (@intotheprogram)
on CodePen.

設定したスタイルやborder-radius等によって色や形は異なるかと思いますが、概ね下記のような動きになっているかと思います。

最後に

いかがでしたでしょうか。

border-radiusは要素の角を少し丸めるだけではなく、独特な形を設定することができるプロパティです。今回は始点と終点だけを設定してアニメーションを作成してみましたが、設定内容によってはもっと面白いユニークな動きも実現可能だと思います。

今後ボタンやパネルのマウスオーバーアニメーションを定義する際に、一案として活用いしていただければ幸いです。

以上、CSSでマウスオーバーした際にborder-radiusがゆらゆらと変化するアニメーションのご紹介でした！