WRITTEN By Kenta Toshikura

12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた

DEMO

This entry was posted by Kenta Toshikura on March 4th 2014. Plz access to our facebookpage or official twitter If you have any questions.

どうもこんにちは。Toshikuraです。今回のTipsは【12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた】です。Flash全盛期でよく見たので懐かしくなって作ってみました。実装は比較的簡単ですのでよろしければ遊んでみてください。まずはデモを見ていただけると内容が把握できるかと思います。

実装方法

実装には下記HTMLが必要になります。枠線とは書きましたが正確にはそれぞれ上下左右に配置されたDIV要素になります。

HTML

<div class="box">

	<h1>1</h1>

	<div class="bd1 bd">

		<div class="bdT"></div>

		<div class="bdB"></div>

		<div class="bdR"></div>

		<div class="bdL"></div>

	</div>

</div>

CSS（全パターン共通）

.box{width: 200px; height: 200px; line-height: 200px; text-align: center; position: relative;}

.bd div{background: #000; position:absolute;-webkit-transition:all 0.3s;transition:all 0.3s;}

.bd div.bdT{width: 100%; height:2px; top:0; left:0;}

.bd div.bdB{width: 100%; height:2px; bottom:0; right:0;}

.bd div.bdR{height:100%; width :2px; right:0; top:0;}

.bd div.bdL{height:100%; width :2px; left:0; bottom:0;}

クラス切り替えでの実装　DEMO

発火のタイミングを特定のクラスの有無で判断するバージョンです。例では親要素に【active】というクラスがある場合にアニメーションが起こるようにしています。

CSS

/* No.1 */

.active .bd1 div.bdT{width: 0;}

.active .bd1 div.bdB{width: 0;}

.active .bd1 div.bdR{height:0;}

.active .bd1 div.bdL{height:0;}
/* No.2 */

.bd2 div{-webkit-transition:all 0.1s;transition:all 0.1s;}

.bd2 div.bdT{transition-delay:0.3s;}

.bd2 div.bdL{transition-delay:0.2s;}

.bd2 div.bdB{transition-delay:0.1s;}

.bd2 div.bdR{transition-delay:0s;}

.active .bd2 div.bdT{width: 0;transition-delay:0s;}

.active .bd2 div.bdL{height:0;transition-delay:0.1s;}

.active .bd2 div.bdB{width: 0;transition-delay:0.2s;}

.active .bd2 div.bdR{height:0;transition-delay:0.3s;}
/* No.3 */

.bd3 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.active .bd3 div.bdT{-webkit-transform: translate(0,-20px); transform: translate(0,-20px);}

.active .bd3 div.bdB{-webkit-transform: translate(0,20px);  transform: translate(0,20px); }

.active .bd3 div.bdR{-webkit-transform: translate(20px,0);  transform: translate(20px,0); }

.active .bd3 div.bdL{-webkit-transform: translate(-20px,0); transform: translate(-20px,0);}
/* No.4 */

.bd4 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.active .bd4 div.bdT{-webkit-transform: translate(0,20px); transform: translate(0,20px);}

.active .bd4 div.bdB{-webkit-transform: translate(0,-20px); transform: translate(0,-20px);}

.active .bd4 div.bdR{-webkit-transform: translate(-20px,0); transform: translate(-20px,0);}

.active .bd4 div.bdL{-webkit-transform: translate(20px,0); transform: translate(20px,0);}
/* No.5 */

.bd5 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.active .bd5 div.bdT{-webkit-transform:rotate(45deg) translate(0,20px);  transform:rotate(45deg) translate(0,20px);}

.active .bd5 div.bdB{-webkit-transform:rotate(45deg) translate(0,-20px); transform:rotate(45deg) translate(0,-20px);}

.active .bd5 div.bdR{-webkit-transform:rotate(45deg) translate(-20px,0); transform:rotate(45deg) translate(-20px,0);}

.active .bd5 div.bdL{-webkit-transform:rotate(45deg) translate(20px,0);  transform:rotate(45deg) translate(20px,0);}
/* No.6 */

.bd6 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.bd6 div:after{content:”; background: #000; position: absolute;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform: translate(0,0); transform: translate(0,0);}

.bd6 div.bdT:after{width: 100%; height:2px; top:0; left:0;}

.bd6 div.bdB:after{width: 100%; height:2px; bottom:0; right:0;}

.bd6 div.bdR:after{height:100%; width :2px; right:0; top:0;}

.bd6 div.bdL:after{height:100%; width :2px; left:0; bottom:0;}

.active .bd6 div.bdT{-webkit-transform: translate(0,5px); transform: translate(0,5px);}

.active .bd6 div.bdB{-webkit-transform: translate(0,-5px);  transform: translate(0,-5px);}

.active .bd6 div.bdR{-webkit-transform: translate(-5px,0);  transform: translate(-5px,0);}

.active .bd6 div.bdL{-webkit-transform: translate(5px,0); transform: translate(5px,0);}

.active .bd6 div.bdT:after{-webkit-transform: translate(0,-5px); transform: translate(0,-5px);}

.active .bd6 div.bdB:after{-webkit-transform: translate(0,5px); transform: translate(0,5px);}

.active .bd6 div.bdR:after{-webkit-transform: translate(5px,0); transform: translate(5px,0);}

.active .bd6 div.bdL:after{-webkit-transform: translate(-5px,0); transform: translate(-5px,0);}
/* No.7 */

.bd7 div{background: none}

.bd7 div:before,.bd7 div:after{content:”; background: #000; position: absolute;-webkit-transition:all 0.1s;transition:all 0.1s;}

.bd7 div:before{background: #eee}

.bd7 div.bdT:after,.bd7 div.bdT:before{width: 100%; height:2px; top:0; left:0;    }

.bd7 div.bdB:after,.bd7 div.bdB:before{width: 100%; height:2px; bottom:0; right:0;}

.bd7 div.bdR:after,.bd7 div.bdR:before{height:100%; width :2px; right:0; top:0;   }

.bd7 div.bdL:after,.bd7 div.bdL:before{height:100%; width :2px; left:0; bottom:0; }

.bd7 div.bdT:after{transition-delay:0.7s;}

.bd7 div.bdL:after{transition-delay:0.6s;}

.bd7 div.bdB:after{transition-delay:0.5s;}

.bd7 div.bdR:after{transition-delay:0.4s;}

.bd7 div.bdT:before{transition-delay:0.3s;}

.bd7 div.bdL:before{transition-delay:0.2s;}

.bd7 div.bdB:before{transition-delay:0.1s;}

.bd7 div.bdR:before{transition-delay:0.0s;}

.active .bd7 div.bdT:after {width: 0;transition-delay:0.0s;}

.active .bd7 div.bdL:after {height:0;transition-delay:0.1s;}

.active .bd7 div.bdB:after {width: 0;transition-delay:0.2s;}

.active .bd7 div.bdR:after {height:0;transition-delay:0.3s;}

.active .bd7 div.bdT:before{width: 0;transition-delay:0.4s;}

.active .bd7 div.bdL:before{height:0;transition-delay:0.5s;}

.active .bd7 div.bdB:before{width: 0;transition-delay:0.6s;}

.active .bd7 div.bdR:before{height:0;transition-delay:0.7s;}
/* No.8 */

.bd8 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.active .bd8 div.bdT{-webkit-transform:translate(100px,0);  transform:translate(0,20px);}

.active .bd8 div.bdB{-webkit-transform:translate(-100px,0); transform:translate(0,-20px);}

.active .bd8 div.bdR{-webkit-transform:translate(0px,-100px); transform:translate(-20px,0);}

.active .bd8 div.bdL{-webkit-transform:translate(0,100px);  transform:translate(20px,0);}
/* No.9 */

.bd9 div{-webkit-transition:all 0.2s;transition:all 0.2s; background: none}

.bd9 div:before,.bd9 div:after{content:”; background: #000; position: absolute;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform: translate(0,0); transform: translate(0,0);}

.bd9 div.bdT:after,.bd9 div.bdT:before{width: 100%; height:2px; top:0; left:0;}

.bd9 div.bdB:after,.bd9 div.bdB:before{width: 100%; height:2px; bottom:0; right:0;}

.bd9 div.bdR:after,.bd9 div.bdR:before{height:100%; width :2px; right:0; top:0;}

.bd9 div.bdL:after,.bd9 div.bdL:before{height:100%; width :2px; left:0; bottom:0;}

.active .bd9 div.bdT:before{width: 50%;-webkit-transform: translate(100px,0); transform: translate(0,0);}

.active .bd9 div.bdB:before{width: 50%;-webkit-transform: translate(-100px,0); transform: translate(0,0);}

.active .bd9 div.bdR:before{height:50%;-webkit-transform: translate(0,-100px); transform: translate(0,0);}

.active .bd9 div.bdL:before{height:50%;-webkit-transform: translate(0,100px); transform: translate(0,0);}

.active .bd9 div.bdT:after {width: 50%;-webkit-transform: translate(-100px,0); transform: translate(0,0);}

.active .bd9 div.bdB:after {width: 50%;-webkit-transform: translate(100px,0); transform: translate(0,0);}

.active .bd9 div.bdR:after {height:50%;-webkit-transform: translate(0,100px); transform: translate(0,0);}

.active .bd9 div.bdL:after {height:50%;-webkit-transform: translate(0,-100px); transform: translate(0,0);}
/* No.10 */

.bd10 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.active .bd10 div.bdT{width: 5px; height: 5px;}

.active .bd10 div.bdB{width: 5px; height: 5px;}

.active .bd10 div.bdR{width: 5px; height: 5px;}

.active .bd10 div.bdL{width: 5px; height: 5px;}
/* No.11 */

.bd11 div{display: none;}

.bd11 {border: 2px solid #000; height: 100%; width: 100%; position: absolute; top: 0;-webkit-transition:all 0.3s;transition:all 0.3s;}

.active .bd11 {-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transform:rotate(180deg); transform:rotate(180deg);border-radius: 50%;}
/* No.12 */

.bd12 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.active .bd12 div.bdT{width: 30%;-webkit-transform: translate(70px,100px); transform: translate(70px,100px);}

.active .bd12 div.bdB{width: 30%;-webkit-transform: translate(-70px,-100px); transform: translate(-70px,-100px);}

.active .bd12 div.bdR{height:30%;-webkit-transform: translate(-100px,70px); transform: translate(-100px,70px);}

.active .bd12 div.bdL{height:30%;-webkit-transform: translate(100px,-70px); transform: translate(100px,-70px);}

マウスホバーでの実装

マウスホバーを基準にアニメーションが起こるようにしたバージョンです。現実的にはこちらの方が登場頻度が多そうな気がします。

CSS

/* No.1 */

.box:hover .bd1 div.bdT{width: 0;}

.box:hover .bd1 div.bdB{width: 0;}

.box:hover .bd1 div.bdR{height:0;}

.box:hover .bd1 div.bdL{height:0;}
/* No.2 */

.bd2 div{-webkit-transition:all 0.1s;transition:all 0.1s;}

.bd2 div.bdT{transition-delay:0.3s;}

.bd2 div.bdL{transition-delay:0.2s;}

.bd2 div.bdB{transition-delay:0.1s;}

.bd2 div.bdR{transition-delay:0s;}

.box:hover .bd2 div.bdT{width: 0;transition-delay:0s;}

.box:hover .bd2 div.bdL{height:0;transition-delay:0.1s;}

.box:hover .bd2 div.bdB{width: 0;transition-delay:0.2s;}

.box:hover .bd2 div.bdR{height:0;transition-delay:0.3s;}
/* No.3 */

.bd3 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.box:hover .bd3 div.bdT{-webkit-transform: translate(0,-20px); transform: translate(0,-20px);}

.box:hover .bd3 div.bdB{-webkit-transform: translate(0,20px);  transform: translate(0,20px); }

.box:hover .bd3 div.bdR{-webkit-transform: translate(20px,0);  transform: translate(20px,0); }

.box:hover .bd3 div.bdL{-webkit-transform: translate(-20px,0); transform: translate(-20px,0);}
/* No.4 */

.bd4 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.box:hover .bd4 div.bdT{-webkit-transform: translate(0,20px); transform: translate(0,20px);}

.box:hover .bd4 div.bdB{-webkit-transform: translate(0,-20px); transform: translate(0,-20px);}

.box:hover .bd4 div.bdR{-webkit-transform: translate(-20px,0); transform: translate(-20px,0);}

.box:hover .bd4 div.bdL{-webkit-transform: translate(20px,0); transform: translate(20px,0);}
/* No.5 */

.bd5 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.box:hover .bd5 div.bdT{-webkit-transform:rotate(45deg) translate(0,20px);  transform:rotate(45deg) translate(0,20px);}

.box:hover .bd5 div.bdB{-webkit-transform:rotate(45deg) translate(0,-20px); transform:rotate(45deg) translate(0,-20px);}

.box:hover .bd5 div.bdR{-webkit-transform:rotate(45deg) translate(-20px,0); transform:rotate(45deg) translate(-20px,0);}

.box:hover .bd5 div.bdL{-webkit-transform:rotate(45deg) translate(20px,0);  transform:rotate(45deg) translate(20px,0);}
/* No.6 */

.bd6 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.bd6 div:after{content:”; background: #000; position: absolute;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform: translate(0,0); transform: translate(0,0);}

.bd6 div.bdT:after{width: 100%; height:2px; top:0; left:0;}

.bd6 div.bdB:after{width: 100%; height:2px; bottom:0; right:0;}

.bd6 div.bdR:after{height:100%; width :2px; right:0; top:0;}

.bd6 div.bdL:after{height:100%; width :2px; left:0; bottom:0;}

.box:hover .bd6 div.bdT{-webkit-transform: translate(0,5px); transform: translate(0,5px);}

.box:hover .bd6 div.bdB{-webkit-transform: translate(0,-5px);  transform: translate(0,-5px);}

.box:hover .bd6 div.bdR{-webkit-transform: translate(-5px,0);  transform: translate(-5px,0);}

.box:hover .bd6 div.bdL{-webkit-transform: translate(5px,0); transform: translate(5px,0);}

.box:hover .bd6 div.bdT:after{-webkit-transform: translate(0,-5px); transform: translate(0,-5px);}

.box:hover .bd6 div.bdB:after{-webkit-transform: translate(0,5px); transform: translate(0,5px);}

.box:hover .bd6 div.bdR:after{-webkit-transform: translate(5px,0); transform: translate(5px,0);}

.box:hover .bd6 div.bdL:after{-webkit-transform: translate(-5px,0); transform: translate(-5px,0);}
/* No.7 */

.bd7 div{background: none}

.bd7 div:before,.bd7 div:after{content:”; background: #000; position: absolute;-webkit-transition:all 0.1s;transition:all 0.1s;}

.bd7 div:before{background: #eee}

.bd7 div.bdT:after,.bd7 div.bdT:before{width: 100%; height:2px; top:0; left:0;    }

.bd7 div.bdB:after,.bd7 div.bdB:before{width: 100%; height:2px; bottom:0; right:0;}

.bd7 div.bdR:after,.bd7 div.bdR:before{height:100%; width :2px; right:0; top:0;   }

.bd7 div.bdL:after,.bd7 div.bdL:before{height:100%; width :2px; left:0; bottom:0; }

.bd7 div.bdT:after{transition-delay:0.7s;}

.bd7 div.bdL:after{transition-delay:0.6s;}

.bd7 div.bdB:after{transition-delay:0.5s;}

.bd7 div.bdR:after{transition-delay:0.4s;}

.bd7 div.bdT:before{transition-delay:0.3s;}

.bd7 div.bdL:before{transition-delay:0.2s;}

.bd7 div.bdB:before{transition-delay:0.1s;}

.bd7 div.bdR:before{transition-delay:0.0s;}

.box:hover .bd7 div.bdT:after {width: 0;transition-delay:0.0s;}

.box:hover .bd7 div.bdL:after {height:0;transition-delay:0.1s;}

.box:hover .bd7 div.bdB:after {width: 0;transition-delay:0.2s;}

.box:hover .bd7 div.bdR:after {height:0;transition-delay:0.3s;}

.box:hover .bd7 div.bdT:before{width: 0;transition-delay:0.4s;}

.box:hover .bd7 div.bdL:before{height:0;transition-delay:0.5s;}

.box:hover .bd7 div.bdB:before{width: 0;transition-delay:0.6s;}

.box:hover .bd7 div.bdR:before{height:0;transition-delay:0.7s;}
/* No.8 */

.bd8 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.box:hover .bd8 div.bdT{-webkit-transform:translate(100px,0);  transform:translate(0,20px);}

.box:hover .bd8 div.bdB{-webkit-transform:translate(-100px,0); transform:translate(0,-20px);}

.box:hover .bd8 div.bdR{-webkit-transform:translate(0px,-100px); transform:translate(-20px,0);}

.box:hover .bd8 div.bdL{-webkit-transform:translate(0,100px);  transform:translate(20px,0);}
/* No.9 */

.bd9 div{-webkit-transition:all 0.2s;transition:all 0.2s; background: none}

.bd9 div:before,.bd9 div:after{content:”; background: #000; position: absolute;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform: translate(0,0); transform: translate(0,0);}

.bd9 div.bdT:after,.bd9 div.bdT:before{width: 100%; height:2px; top:0; left:0;}

.bd9 div.bdB:after,.bd9 div.bdB:before{width: 100%; height:2px; bottom:0; right:0;}

.bd9 div.bdR:after,.bd9 div.bdR:before{height:100%; width :2px; right:0; top:0;}

.bd9 div.bdL:after,.bd9 div.bdL:before{height:100%; width :2px; left:0; bottom:0;}

.box:hover .bd9 div.bdT:before{width: 50%;-webkit-transform: translate(100px,0); transform: translate(0,0);}

.box:hover .bd9 div.bdB:before{width: 50%;-webkit-transform: translate(-100px,0); transform: translate(0,0);}

.box:hover .bd9 div.bdR:before{height:50%;-webkit-transform: translate(0,-100px); transform: translate(0,0);}

.box:hover .bd9 div.bdL:before{height:50%;-webkit-transform: translate(0,100px); transform: translate(0,0);}

.box:hover .bd9 div.bdT:after {width: 50%;-webkit-transform: translate(-100px,0); transform: translate(0,0);}

.box:hover .bd9 div.bdB:after {width: 50%;-webkit-transform: translate(100px,0); transform: translate(0,0);}

.box:hover .bd9 div.bdR:after {height:50%;-webkit-transform: translate(0,100px); transform: translate(0,0);}

.box:hover .bd9 div.bdL:after {height:50%;-webkit-transform: translate(0,-100px); transform: translate(0,0);}
/* No.10 */

.bd10 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.box:hover .bd10 div.bdT{width: 5px; height: 5px;}

.box:hover .bd10 div.bdB{width: 5px; height: 5px;}

.box:hover .bd10 div.bdR{width: 5px; height: 5px;}

.box:hover .bd10 div.bdL{width: 5px; height: 5px;}
/* No.11 */

.bd11 div{display: none;}

.bd11 {border: 2px solid #000; height: 100%; width: 100%; position: absolute; top: 0;-webkit-transition:all 0.3s;transition:all 0.3s;}

.box:hover .bd11 {-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transform:rotate(180deg); transform:rotate(180deg);border-radius: 50%;}
/* No.12 */

.bd12 div{-webkit-transition:all 0.2s;transition:all 0.2s;}

.box:hover .bd12 div.bdT{width: 30%;-webkit-transform: translate(70px,100px); transform: translate(70px,100px);}

.box:hover .bd12 div.bdB{width: 30%;-webkit-transform: translate(-70px,-100px); transform: translate(-70px,-100px);}

.box:hover .bd12 div.bdR{height:30%;-webkit-transform: translate(-100px,70px); transform: translate(-100px,70px);}

.box:hover .bd12 div.bdL{height:30%;-webkit-transform: translate(100px,-70px); transform: translate(100px,-70px);}

以上になります。

WRITTEN By Kenta Toshikura

12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた

実装方法

HTML

CSS（全パターン共通）

クラス切り替えでの実装　DEMO

CSS

マウスホバーでの実装

CSS

SVG Filter & CSS3 を使いグレースケールやぼかしを利用する方法

CSS3ボタンが簡単に作れるサービス【CSS3 Button Generator】

CSS3でPC,iPhone,iPadのモックを作ってみたよ – 色んなサイズ対応版 – How to make iPhone/iPad/PC mockup with CSS3

立体感を演出するシネマグラフがすごい “The cinema-graph” is amazing expressions to add as three dimensional effects to photos.

12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた

【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons

iPhoneサイトでフォーム送信ボタンにオリジナルデザインを適用する方法 – CSS3 appearanceプロパティ

jQuery CSS3 transform及びtransitionが動作するかどうかの判別方法 – CSS3アニメーションとjQueryアニメーションの使い分け

jQuery キーボードによって要素を操作する方法 – キーの取得とその活用に関して

【17選】要素をひっくり返す動作や本をめくる動作を実装するjQueryプラグイン

簡単！CSS3でアニメーションを実装する方法【vol.1】 – とりあえずはじめの一歩。

実装方法

HTML

CSS（全パターン共通）

クラス切り替えでの実装 DEMO

CSS

マウスホバーでの実装

CSS

クラス切り替えでの実装　DEMO