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

サンプル

スタイリッシュでかっこいいサイトとかでたまに出てくるあれだよ。

See the Pen VQxvMp by nabe_kurage (@nabe_kurage) on CodePen.

解説

HTML

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

<div>
  <p>APPEAR</p>
</div>

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%にすることで横から箱が伸びてくるような動きを作ります。

See the Pen wyXGPW by nabe_kurage (@nabe_kurage) on CodePen.

伸びたafter要素をtransformで100%+αで右方向に移動させてやります。

See the Pen PQaNQP by nabe_kurage (@nabe_kurage) on CodePen.

外枠divにoverflow、hiddenをかけてやるとあたかも擬似要素のboxが消えていくように見えます。

See the Pen EQRKMG by nabe_kurage (@nabe_kurage) on CodePen.

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