SVG初心者が試してみた！SVGとCSSを使ったボタンアニメーション

2016-12-20

ノウハウ

どうも、すんです。

2016年ももうすぐ終わってしまいますね。度重なる忘年会により肝臓が若干疲れ気味の私ですが、楽しいお酒が飲めるのはとても幸せなことです。
前回は、文字が書かれていくように見えるパスアニメーションについての記事を書きましたが、今回はサイトのアクセントとして使えるボタンアニメーションについて、紹介していきたいと思います。

マウスオーバーで動くボタン

Button

上の「Button」というテキストにマウスを重ねると周りに破線が描かれていきます。ばばばっと出てくるので、ちょっと目がチカチカしますね。これくらいのアニメーションは、下のような簡単なコードでできてしまいます。

【html】

<div class="btn-box">
  <svg version="1.1" id="test" height="60" width="320" xmlns="http://www.w3.org/2000/svg">
    <rect class="button" height="60" width="320" />
  </svg>
   <div class="button-text">Button</div>
</div>

【css】

.btn-box {
  height: 60px;
  margin: 0 auto;
  width: 350px;
  cursor: pointer;
  text-align: center;
}

.button {
  fill: transparent;
  stroke-dasharray: 120 420;
  stroke-dashoffset: -500;
  stroke-width: 8px;
  stroke: #fff;
}

.button-text {
  color: #333;
  font-size: 25px;
  line-height: 50px;
  position: relative;
  top: -48px;
}

@keyframes b-animate {
  0% {
    stroke-dasharray: 120 420;
    stroke-dashoffset: -500;
    stroke-width: 8px; /* 線の幅 */
  }
  100% {
    stroke-dasharray: 5; /* 破線を作成するためのプロパティ */
    stroke-dashoffset: 0;
    stroke-width: 2px; /* 線の幅 */
    stroke: #333; /* 線の色 */
  }
}

.btn-box:hover .button {
  -webkit-animation: 0.4s b-animate linear forwards;
  animation: 0.4s b-animate linear forwards;
}

keyframesの「stroke-width」は、書かれていく線の幅、「stroke」は線の色の設定になります。
keyframesの0%部分に指定してあるのはアニメーション開始時の指定で、100%部分に指定してあるのはアニメーション終了時の指定になります。徐々に0%時の指定から100%時のものに移り変わっていきます。

背景に色を入れてみた

Button

@keyframes b-animate {
  0% {
    stroke-dasharray: 120 420;
    stroke-dashoffset: -500;
    stroke-width: 8px; /* 線の幅 */
    fill: rgba(0, 0, 0, 0); /* ボタンの背景色 */
  }
  100% {
    stroke-dasharray: 820; /* 破線を作成するためのプロパティ */
    stroke-dashoffset: 0;
    stroke-width: 2px; /* 線の幅 */
    stroke: #333; /* 線の色 */
    fill: rgba(0, 0, 0, 0.1); /* ボタンの背景色 */
  }
}

keyframesの記述を変えて、ボタンのアニメーションを変更してみました。
keyframesの「fill」はボタンの背景部分の設定になります。破線を作成するプロパティ「stroke-dasharray」に大きな値を入れて、破線を一本の線にしています。

ボタンの線の色と背景色を変えてみた

Button

グレーと黒だとやはり味気ないので、色を少し変えてみます。下記のようにkeyframesの記述を変更することで、

【css】

@keyframes b-animate {
  0% {
    stroke-dasharray: 150 500;
    stroke-dashoffset: -500;
    stroke-width: 8px; /* 線の幅 */
    fill: rgba(255, 182, 182, 0); /* ボタンの背景色 */
  }
  100% {
    stroke-dasharray: 820;
    stroke-dashoffset: 0;
    stroke-width: 2px; /* 線の幅 */
    stroke: #ff8a8a; /* 線の色 */
    fill: rgba(255, 182, 182, 0.3); /* ボタンの背景色 */
  }
}

簡単に色や線の色、線の幅の変更もできてしまいます。

まとめ

調べれば調べるほど奥が深いSVGですが、このように簡単なボタンを作る際にも使用することができます。サイト内に使うボタンにちょっとアクセントとしてSVGを使ってみるのも、面白いかもしれませんね。いつかごってごてに動くSVGをふんだんに使ったサイトを作ってみたいものです…実現するにはもっと勉強しないとですね、来年も頑張ります。