SVGのホバーアニメーションを作ってみよう

  • Writer /
    NISHINO SHIHO
  • #ウェブデザイン
  • #HTML / CSS

こんにちは。Web担当の西野です。

本サイトで使用しているボタンのホバーアニメーションが結構可愛くできたので、
作成工程を解説したいと思います。

ホバーアニメーション

マウスホバーすると、ボタンの枠線がくるっと回ります。

SVG

まずはSVGを用意します。

角丸の枠線部分は、IllustratorやPhotoshopなどで、SVG形式で書き出します。
今回はデザインデータがPhotoshopだったので、Photoshopから書き出しました。

書き出したファイルをテキストエディタで開き、不要な情報を削除します。

Before

<svg xmlns="http://www.w3.org/2000/svg" width="296" height="54" viewBox="0 0 296 54">
  <defs>
    <style>
      .cls-1 {
        fill: #000;
        stroke-width: 0px;
      }
    </style>
  </defs>
  <path class="cls-1" d="M27.12.49h242c14.71.03,26.61,11.98,26.58,26.68-.03,14.66-11.91,26.55-26.58,26.58H27.12c-14.71-.03-26.61-11.98-26.58-26.68C.57,12.4,12.46.52,27.12.49Z"/>
</svg>

After

<svg xmlns="http://www.w3.org/2000/svg" width="296" height="54" viewBox="0 0 296 54">
  <path d="M27.12.49h242c14.71.03,26.61,11.98,26.58,26.68-.03,14.66-11.91,26.55-26.58,26.58H27.12c-14.71-.03-26.61-11.98-26.58-26.68C.57,12.4,12.46.52,27.12.49Z"/>
</svg>

HTML

次にHTMLです。

先ほどのSVGをaタグで囲ったのみです。

<a class="button" href="">
  ホバーアニメーション
  <svg xmlns="http://www.w3.org/2000/svg" width="296" height="54" viewBox="0 0 296 54">
    <path d="M27.12.49h242c14.71.03,26.61,11.98,26.58,26.68-.03,14.66-11.91,26.55-26.58,26.58H27.12c-14.71-.03-26.61-11.98-26.58-26.68C.57,12.4,12.46.52,27.12.49Z"/>
  </svg>
</a>

CSS

.button{
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    color: #628d8b;
    padding: 16px 24px;
    letter-spacing: .1em;
    width: 296px;
    height: 54px;
    border-radius: 6.25rem;
    font-size: 14px;
    font-weight: 600;
    background-color: #ffffff;
    transition: background-color .5s ease-in-out,color .35s ease-in-out;
}
.button svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.button path {
    fill: none;
    stroke: #628d8b;
    stroke-width: 1px;
    stroke-dasharray: 651;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .6s ease-in-out;
}
.button::after  {
    content: "";
    height: 1px;
    width: 25px;
    background-color: #628d8b;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: transraleY(-50%);
    transition: transform .35s ease-in-out;
}
.button:hover {
    background-color: rgba(98,141,139,.5);
    color: #fff;
}
.button:hover path {
    stroke-dashoffset: 651;
}
.button:hover::after {
    transform: translateX(100%);
}

解説

枠線がくるっと回るアニメーションの部分のみ解説します。

まず、stroke-dasharrayで枠線が全て埋まるまでの数値を指定をします。
そしてstroke-dashoffsetで描画開始位置を指定します。
今回は通常時は枠線を表示させておきたいので、0にしています。

.button path {
    fill: none;
    stroke: #628d8b;
    stroke-width: 1px;
    stroke-dasharray: 651;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .6s ease-in-out;
}

次にホバー時の記述です。
ホバーすると枠線が消えるアニメーションにしたいので、
stroke-dashoffsetにstroke-dasharrayと同じ数値を入れます。

.button:hover path {
    stroke-dashoffset: 651;
}

まとめ

これまであまりSVGのアニメーションはやってこなかったのですが、
実際にやってみると楽しいですね。
こだわれば、もっと複雑なアニメーションも実現できるかと思います。

この記事が何かの参考になれば嬉しいです。

BACK TO LIST
CONTACT