ブロックが現れて、伸びて、文字やコンテンツが残るブロックアニメーションの作り方【自分用メモ】

##  サンプル
スタイリッシュでかっこいいサイトとかでたまに出てくるあれだよ。
<p data-height="394" data-theme-id="dark" data-slug-hash="VQxvMp" data-default-tab="result" data-user="nabe_kurage" data-embed-version="2" data-pen-title="VQxvMp" class="codepen">See the Pen <a href="https://codepen.io/nabe_kurage/pen/VQxvMp/">VQxvMp</a> by nabe_kurage (<a href="https://codepen.io/nabe_kurage">@nabe_kurage</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

##  解説
###HTML
表示する文字や画像と、それを囲むdivを用意。

```html
<div>
  <p>APPEAR</p>
</div>
```
###CSS
```css
body{
  margin:0;
  text-align:center;
  font-family:'arial black';
  font-size: 56px;
  background-color:#FDFDEB;
}
div {
  margin: 50px 0;
  display:inline-block;
  overflow:hidden;
  position:relative;
}
div:after{  
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color:#F9CE00;
  /*アニメーションの設定*/
  animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77,0,.175,1),
             secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77,0,.175,1);
  animation-fill-mode: both;
}
p {
  margin: 0.05em;
  line-height:1;
  color: #09194F;
  /*アニメーションの設定*/
  animation:fadeIn 0.1s 0.5s; 
  animation-fill-mode: both;
}

/*keyframesの設定*/
/*文字が消えている状態から現れるアニメーション*/
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
/*はじめにブロックを伸ばすアニメーション*/
@keyframes secondaryImageOverlayIn {
    0% {
      width: 0;
    }
    100% {
      width:  100%;
    }
  }
/*のび太ブロックを横に追いやるアニメーション*/
  @keyframes secondaryImageOverlayOut {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(102%);
    }
  }

```

### アニメーション解説
**外枠のdivに擬似要素afterをつけてあげます。**
こいつは、はじめwidth:0で見えない状態ですが、
アニメーションでwidthを100%にすることで横から箱が伸びてくるような動きを作ります。
<p data-height="265" data-theme-id="dark" data-slug-hash="wyXGPW" data-default-tab="css,result" data-user="nabe_kurage" data-embed-version="2" data-pen-title="wyXGPW" class="codepen">See the Pen <a href="https://codepen.io/nabe_kurage/pen/wyXGPW/">wyXGPW</a> by nabe_kurage (<a href="https://codepen.io/nabe_kurage">@nabe_kurage</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

**伸びたafter要素をtransformで100%+αで右方向に移動させてやります。**
<p data-height="265" data-theme-id="dark" data-slug-hash="PQaNQP" data-default-tab="css,result" data-user="nabe_kurage" data-embed-version="2" data-pen-title="PQaNQP" class="codepen">See the Pen <a href="https://codepen.io/nabe_kurage/pen/PQaNQP/">PQaNQP</a> by nabe_kurage (<a href="https://codepen.io/nabe_kurage">@nabe_kurage</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

**外枠divにoverflow、hiddenをかけてやるとあたかも擬似要素のboxが消えていくように見えます。**
<p data-height="265" data-theme-id="dark" data-slug-hash="EQRKMG" data-default-tab="css,result" data-user="nabe_kurage" data-embed-version="2" data-pen-title="EQRKMG" class="codepen">See the Pen <a href="https://codepen.io/nabe_kurage/pen/EQRKMG/">EQRKMG</a> by nabe_kurage (<a href="https://codepen.io/nabe_kurage">@nabe_kurage</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>


中の要素にfadeInのアニメーションをかけてあげて、ブロックが被っている間に表示されるようにすれば、ブロックアニメーションの完成です