コーポレートサイトとかでWEBサイトを開いた時にロゴマークが表示されてWEBサイトのファーストビューが表示されるオープニングアニメーション的なやつ。
最近は、最初にテキストを読ませたりとか、映像と融合したダイナミックな表現が増えてますが、簡単なロゴマークをアニメーションで出してから、WEBサイトを表現するならCSSのアニメーションだけでもそれっぽい感じで表現することは可能です。

今回の実装方法は以下の2段階に分けてローディングアニメーションを実装しています。
・ロゴマークのアニメーションをCSSで実装
・WEBサイトの上に被っているロゴマークの画面から外れる

使用するのは、CSSのanimationプロパティと@keyframesになります。

（1）ロゴマークを表示させる土台を用意

まず、土台になるHTMLを準備

  <div id="logo_loader" class="open">
    <div class="f_logo">
      <img src="logo.png" alt="logo">
    </div>
  </div>

ロゴマーク入れている＜div＞にさらに、＜div class=“logo_loader”＞で2重に囲います。

そして、CSSはこんな感じ

#logo_loader {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 101;
    background-color: #333;
}
#logo_loader .f_logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 160px;
    height: 50px;
    text-align: center;
    color: #fff;
    font-size: 30px;
}
#logo_loader .f_logo img {
    width: 100%;
    height: auto;
}

CSSはモニター全体を囲うために#logo_loaderには「 height: 100vh;」を指定します。
これで、PCでもスマホでも問題なく背景黒画面で囲うことができます。
ロゴマークは、どのモニター幅でも天地中央に配置されるようにpositionで指定します。
flexboxとかで指定してもいいですね。

（2）ロゴマークをアニメーションさせる

ロゴの配置が終わったら、次はロゴマークがアニメーションされるように@keyframesを書いていきます。
今回のこのアニメーションの基盤は、「before要素の四角形で隠れているロゴマークを表示させる」というオーソドックスな技法になります。

まずは、before（疑似要素）を使って、ロゴマークを隠します。

#logo_loader .f_logo:before {
    content: "";
    display: block;
    width: 100%;
    height: 110%;
    background-color: #333;
    position: absolute;
    top: 0;
    left: 100%;
    animation: loadLogo 1.5s;
}

そして、@keyframesでアニメーションさせます。

@keyframes loadLogo {
  0% {
    left: 0;
  }
  50% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

どのプロパティにキーフレームを適用するかはanimationプロパティを使う必要があります。
今回は「#logo_loader .f_logo:before」の部分ですね。

#logo_loader .f_logo:before {
    animation: loadLogo 1.5s;
}

（3）ファーストビューを表示させるためのアニメーション

ロゴのアニメーションが終わったら、こいつらにどいてもらわないと、WEBサイトのコンテンツが表示されません。なので、こっちは時間差で別のanimationを入れる必要があります。

#logo_loader.open {
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    animation-delay: 2s;
}

@keyframes slideOut {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

ポイントとしては、「animation-fill-mode」で「forwards」を指定し、アニメーション終了の状態がそのまま維持されるようにしています。これがないと、アニメーションされた後、元の状態に戻ってしまいます。
あと、ロゴが表示された後にこっちのアニメーションをさせる必要があるので、「animation-delay」で、アニメーションのタイミングをズラしています。

• animation-delay－CSS3リファレンス
• animation-fill-mode | CSSプロパティ辞典

これで、こんな感じのアニメーションが実装できました。
DEMO(左右に動くアニメーション)

scale（拡大・縮小をアニメーションさせるやつ）を使えば、こんな感じのアニメーションも入れれます。
DEMO(スケールアニメーション)

まとめ

今回はCSSのみでアニメーションを設置しましたが、jQueryやもっと複雑な@keyframesを使えば、表現の幅は広がるかと思います。簡易的なアニメーションならCSSだけで十分です。
ただ、もれなくページを回遊するたびに、この4秒ぐらいのアニメーションを見せられるのは、ユーザーにとってはストレスになるかもしれませんので、TOPページにだけ表示させるとか、Cookieを利用して、最初の閲覧時だけ表示させるとか、何かしらの工夫は必要かもしれません。
今回は以上です。