先端サイトに学ぶCSS3/jQueryアニメーションデザイン ― 第3回

SVG線画が美しいリッチアニメーションの作り方 (2/2)

STEP 4：ボックスに組み込む

　SVGのアニメーションができたら、続いて、線で取り囲むためのボックスを用意する。一見すると1pxのボーダーを指定しただけのdiv要素に見えるが、あとで動きをつけるために、幅もしくは高さを1pxにして塗りつぶしたdiv要素を上下左右に4つ配置し、枠線として見せている。

　ボックスが完成したら、先ほど作成したSVGをボックス（div.db）の中に入れる。

■ソースコード（HTML）

<div class="box">
        <div class="bd">
    <svg><g><path class="path" d="M5….." /></g></svg>

            <div class="bdT"></div>
            <div class="bdB"></div>
            <div class="bdR"></div>
            <div class="bdL"></div>
        </div><!-- .bd -->
 </div><!-- .box -->

■ソースコード（CSS）

/* .box のCSSは同上 */

.bd{
    width: 1060px;
    height: 250px;
    text-align: center;
    position: relative;
    padding: 60px 0;
}
div.bd div{
    background: #092951;
     position:absolute;
     -webkit-transition:all 1s ease-in-out;
     transition:all 1s ease-in-out;
    }

.bd div.bdT{
    width: 100%;
    height:1px;
    top:0;
    left:0;
}
.bd div.bdB{
    width: 100%;
    height:1px;
    bottom:0;
    right:0;
}
.bd div.bdR{
    height:100%;
    width :1px;
    right:0;
    top:0;
}
.bd div.bdL{
    height:100%;
    width :1px;
    left:0;
    bottom:0;
}
/* .pathのCSSは同上 */

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/003/4.html

STEP 5：枠線に動きをつける

　仕上げとして、ボックスの枠線に動きをつけよう。ページが読み込まれたあと、線が少しずつ伸びて枠線が完成するアニメーションだ。

　STEP 4で作成した、4つの枠線（bdT/bdB/bdR/bdL）のスタイル名を変更し、セレクターの頭に「.active」をつけておく。bdT/bdB/bdR/bdLのデフォルトのスタイルは新たに記述し、widthおよびheightを「0」にしよう。

　ページの読み込みが完了したら、jQueryのaddClass()メソッドでclass名「active」を付けるようにする。あとは、枠線（div.bd div）に対してCSSのtransitionプロパティを設定すると、ページの読み込み時に、幅または高さが0から100%に変わるアニメーションの完成だ。

■ソースコード（CSS）

/* .box, .bd, div.bd divのCSSは同上 */

.active .bd div.bdT{
    width: 100%;
    height:1px;
    top:0;
    left:0;
}
.active .bd div.bdB{
    width: 100%;
    height:1px;
    bottom:0;
    right:0;
}
.active .bd div.bdR{
    height:100%;
    width :1px;
    right:0;
    top:0;
}
.active .bd div.bdL{
    height:100%;
    width :1px;
    left:0;
    bottom:0;
}
.bd div.bdT{
    width: 0;
}
.bd div.bdB{
    width: 0;
}
.bd div.bdR{
    height:0;
}
.bd div.bdL{
    height:0;
}

■ソースコード（JavaScript）

$(function() {
    $('.box').addClass('active');
});

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/003/5.html

バリエーション＆アレンジのヒント

　マウスオーバーやクリックをアニメーションのトリガーと、色を変化させるアニメーションを追加すると、Béatrice Créationsのトップのような動きも実現できる。

/* .box .bdのCSSは同上 */
body{background: #092951;}
div.bd div{background: #fff; position:absolute;-webkit-transition:all .3s ease-in-out .3s;transition:all .3s ease-in-out .3s;}

.active .bd div{background: #fff;}
.active .bd div.bdT{width: 100%; height:1px; top:0; left:0;}
.active .bd div.bdB{width: 100%; height:1px; bottom:0; right:0;}
.active .bd div.bdR{height:100%; width :1px; right:0; top:0;}
.active .bd div.bdL{height:100%; width :1px; left:0; bottom:0;}

div.bdT{width: 0;}
div.bdB{width: 0;}
div.bdR{height:0;}
div.bdL{height:0;}

.box:hover .bd div.bdT{width: 0;}
.box:hover .bd div.bdB{width: 0;}
.box:hover .bd div.bdR{height:0;}
.box:hover .bd div.bdL{height:0;}

.path{    
    stroke:#fff;
    fill:#092951;
    stroke-width:1;    
    stroke-dasharray: 3000;
    stroke-dashoffset:3000;
    -moz-animation:DASH 2s ease-in-out 1s forwards;
    -webkit-animation:DASH 2s ease-in-out 1s forwards;
    -o-animation:DASH 2s ease-in-out 1s forwards;
    animation:DASH 2s ease-in-out 1s forwards;
    -webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;    
}

@keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-moz-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-webkit-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-o-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-ms-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/003/6.html

著者：菊岡未希子（きくおか・みきこ）

1990年生まれ。株式会社レターズのデザイナー。2013年からWebデザイナーとして働き始める。Webに関する活動拠点「Stronghold」というサイトでブログを書いたり、デザインの実験をしている。

■運営サイト

• http://letters-inc.jp/
• http://zxcvbnmnbvcxz.com/