スーッ（CSS） | 動くWebデザインアイディア帳

最低限おぼえておきたい動き
-スーッ（CSS）-

See the Pen 4-8 最低限覚えておきたい現れ方 - スーッ by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね！↑

動きを実現する仕組み

CSS アニメーションで実現する枠線が伸びて出現する方法です。

①上下線が伸びる設定を外側のボックスの疑似要素（lineの::beforeと::after）にする
②左右線が伸びる設定を内側のボックスの疑似要素（line2の::beforeと::after）に設定する
③内側のボックス（.lineinappear）を左線が描かれるタイミングで遅らせて出現

このサンプルは、画面を開いたらすぐに動きます。
スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。

HTMLの書き方

<div class="line">
<div class="line2">
<div class="lineinappear">枠線が伸びて出現</div>
</div>
</div>

自作のCSS内の書き方

/*枠線が伸びて出現*/
.line{
  position: relative; /* 枠線が書かれる基点*/
}

/*上下線*/
.line::before,
.line::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.line::before {
	top:0;
	left:0;
	animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
	top:0;
	right:0;
	animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.line::after { 
	bottom:0;
	right:0;
	animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
	bottom:0;
	left:0;
	animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/
.line .lineinappear{
	animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;/*初期値を透過0にする*/	
}

@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}