CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみるサンプル See the Pen Opening Fake Shutter with pure CSS by digistate (@digistate) on CodePen. やっていることはごく簡単で、オープニングシャッター用の最前面のレイヤー要素(.shutter)を CSS アニメーションで変形させながら、最終的に非表示にして背面に移動させているだけです。 HTML の構造 HTML の構造もシンプルです。 オープニングシャッター用の要素(.shutter)を最初に記述し、その後にメインのページコンテンツ(.container)を配置します。 <div class="shutter"></div> <section class="container"> <!-- ここにメインコンテンツ --> </section> CSS の構造 オープニングシャッター用の要素は、最前面に表示し
