時期が時期なのでハロウィーン仕様の404ページを作ってみた #CSS

期間限定だが、404ページをハロウィーン仕様にしてみました。
ページを読み込んだら、1秒かけてカボチャの口が開いて、メッセージ「404 File not found.」が表示されるというアニメーションです。

右上の「EDIT ON CODEPEN」のロゴをクリックすると、記事に埋め込まれているコードが画面いっぱいに表示されるページに遷移します。

See the Pen Untitled by haruyosih (@lvn_HO) on CodePen.

口が開くカボチャのパーツを上顎 div id="upper"、下顎 div id="lower"、頬 div id="cheek"の3つのパーツに分け、この3つのパーツを包含するブロックを div id="pumpkin"としました。さらにこの中にメッセージ用テキストも内包しています。

<div id="pumpkin">
<div id="upper"></div>
<div id="lower"></div>
<div id="cheek"></div>
<div id="message"><span>404</span>File not found.</div>
</div>

① cssでのレイアウトは div id="pumpkin"を基準（ position:relative;）として、「上顎」「頬」「下顎」を絶対配置 position:absolute;で配置します。

②はじめは上顎は閉まっている状態です。上顎の高さは294pxで、口が開いた状態にするにはtop: -294px;（要素の高さ分だけ上にあげる）、口を閉じた状態の時には100px下に配置したいのでtop: -194px;とします。この状態で始まり、1秒かけて上に100px移動させるのでアニメーションのcssは以下のようにします。

@keyframes upper {
    0% { 
        top: -194px;
    }
    100% {
        top: -294px;
    }
  }

③下顎は div id="lower" はheight: 112pxで、
ページ読み込み後、1秒かかて112px下に移動させるのでアニメーションのcssは以下のようにします。

@keyframes lower {
    0% { 
        bottom: 0px;
    }
    100% {
        bottom: -112px;
    }
  }

④頬 div id="cheek" は初めは見えない状態にしておきたいので初期値は height: 0　、で1秒かけて200pxの高さに変型させます。
その際、基準点が左上になり、上から下に 200px伸びる動きになります。真ん中がから上と下に 100pxずつ広がってほしいので position:100px（上下真中の位置）として、このブロックの高さ（200px）の半分（100px）の高さにしておきます。
アニメーションのcssは以下のようにします。

@keyframes cheek {
    0% { 
        height:0px;
        opacity: 1;
        top: 100px;
    }
    100% {
        height:200px;
        opacity: 1;
        top: 0;
    }
 }

⑤404メッセージもブラーをつけてフェードインで表示されるアニメーションにしました。
HTMLは

<div id="message"><span>404</span>File not found.</div></div>

cssで blurFadeIn というアニメーションネームをつけて、ページを読み込んでから3秒後に3秒かけて文字をフェードインさせます。

#message {
　animation: blurFadeIn 3s ease 3s 1 forwards;
　opacity: 0;
}

@-webkit-keyframes blurFadeIn{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }
    50%{
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        transform: scale(1.1);
    }
    100%{
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }
}

こうするとページ読み込み後、上下の顎が開いて口の中 div id="cheek" が見えて、更にテキストアニメーションで404メッセージが表示されます。