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

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。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);}

マウスホバーでの実装　DEMO

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

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);}

以上になります。