ブロックチェーン・AI・システム開発の株式会社INDETAIL

SVGとCSSでボタンにアニメーションをつけてみよう

2015.10.19
rockd

10月も後半に差し掛かり、北海道は早くも冬の訪れを感じさせるような寒さとなってきました。
皆さんいがかお過ごしでしょうか。
さて、今回は前回紹介したSVG要素を使ったちょっぴりカッコいいhoverテクニックを紹介します。

まずは実際にコードを書いてみます。

■HTML

■CSS

実際に画面で表示するとこのように表示されます(※表示はchromeブラウザ)

hover

今回のポイントはSVGの破線のプロパティ、stroke-dasharrayとstroke-dashoffsetにあります。

stroke-dasharray

点線や破線のパターンを指定します。線の長さと間隔の数値をコンマかスペースで区切ることで、描画するパターンを自由に変更することができます。
「線の長さ(dash)」と「線同士の間隔(gap)」については、stroke-dasharray: (dash) (gap);のように指定します。

stroke-dashoffset

線の開始位置を変更することができます。
「開始位置(offset)」をstroke-dashoffset: (offset);のように指定します。

上記のサンプルではCSSで最初にrect要素に対してstroke-dasharrayとstroke-dashoffsetを指定しています。

hoverしたタイミングで値を変化させることによって線が移動したようなアニメーションを表現しています。

もう1つサンプルを紹介します。

■HTML

■CSS

上記をブラウザで見てみるとこのような感じになります。

hover2

こちらは4つのline要素を破線にして、hoverでtransformを使い移動させることによってアニメーションを表現しています。

hover_line_top

上記のようなテクニックを工夫すれば、色々と面白いアニメーションが作れると思います。
なんだか少し物足りないと感じたときにSVGを使ったアニメーションを取り入れてみてはいかがでしょうか。

■参考サイト

http://codepen.io/sreucherand/pen/gHDaI
http://tympanus.net/codrops/2014/02/26/creating-a-border-animation-effect-with-svg-and-css/

rockd

エンジニア。 最近はフロントエンドを担当することが多い。 たまにデザインをすることもある。 インドアな見た目とは裏腹に意外とアウトドア。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。