2019年11月25日

これだけ理解してなんちゃってエンジニアを脱出しよう|ボーダーアニメーションの基本的な考え方と応用編

ボーダーアニメーションの基本的な考え方と応用編

お世話になっております。佐藤です。今回は最近のサイトで見るようになったボーダーアニメーションについて解説していきます。

コピペエンジニア(コーダー)を卒業しよう!

ボーダーアニメーションと検索すればいくつか記事が出てきますがコードだけが載っている記事が多く原理まで解説している記事は少ないです。それでは次に同じ案件に遭遇した際や何が出来て、何が出来ないのかが分からず、コピペのなんちゃってエンジニア(コーダー)になりかねません。

ボーダーアニメーションの基本的な考え方

ボーダーアニメーションと聞くと「border」要素にアニメーションをかけるのかなと思いがちですがそうではありません。

答えは「擬似要素を生成し、それにアニメーションを付与する」です。

共通HTML

<div class="box">
  <div class="inner"></div>
</div>

今回は分かりやすく、上記のようなHTMLを例に解説します。まずは目指しているアニメーションを確認しましょう。

See the Pen border-animation by seeknext (@seeknext) on CodePen.

上記のようなborderアニメーションを目指します!

では単純にborderをアニメーションする例を見てみます。

See the Pen border-animation-border by seeknext (@seeknext) on CodePen.

上記のような形でborderが浮かび上がるだけで、かっこいいアニメーションとは少し違う形になってしまします。これを解決するには前述で書いたとおり擬似要素を生成し、アニメーションさせます。

四角形の枠を埋めるためには上辺、右辺、下辺、左辺が必要です。そのため.boxの中に.innerという<div>を用意して無理やり4辺を用意します。(擬似要素はbeforeとafterの2つが限界なため)

この基本的な考え方が理解できればもうマスターしたと同じです!擬似要素の位置を変更したり、時間やタイミングを変更することで色々なアニメーションを実装することが可能となります!

ボーダーアニメーション|ホバーアウトの際も逆再生を実装

See the Pen border-animation 応用編 by seeknext (@seeknext) on CodePen.

原理を理解すれば意外と簡単なボーダーアニメーション。これを参考にウェブサイトにかっこいいアニメーションを実装してみて下さい!