月: 2020年3月

ホームページを開いた時に、画像やテキストがアニメーションするとかっこいいですよね。以前はJavaScriptでアニメーションを実装することが多かったですが、CSSでもアニメーションを実装することが出来ます。今回は簡単なアニメーションの例を元にして、CSSでアニメーションを実装する方法を解説します。 アニメーションのサンプルをご紹介 今回は以下のアニメーションを作成します。 左右から背景がスライドして、その後に中央のテキストが表示されるというアニメーションです。 まずはアニメーションなしでコーディング まずはアニメーションなしでHTMLとCSSをコーディングします。 HTMLは以下のようにコーディングしました。 &lt;div class="animation-area"> &lt;div class="bg-blue">&lt;/div> &lt;div class="bg-black">&lt;/div> &lt;div class="square">&lt;/div> &lt;div class="text-box"> &lt;p class="text-1">RYOB&lt;/p> &lt;p class="text-2">Web design&lt;/p> &lt;/div> &lt;/div> .animation-areaはアニメーションする領域。.bg-blueは青色の背景。.bg-blackは黒色の背景。.squareは白枠の正方形。.text-boxは中央の白文字です。 CSSは以下のようにコーディングしました。 body { margin: 0; } .animation-area { position: relative; height: 100vh; width: 100vw; } .bg-blue, .bg-black { position: absolute; top: 0; height: 100%; width: 50%; } .bg-blue { left: 0; background-color: #0062ff; } .bg-black { right: 0; background-color: #000; } .square { position: absolute; top: 50%; left: 50%; height: 400px; width: 400px; border: 5px solid #fff; transform: translate(-50%, -50%); } .text-box { position: absolute; top: 50%; left: 50%; color: #fff; text-align: center; transform: translate(-50%, -50%); } .text-1 { margin: 0 0 .5rem; font-size: 100px; font-weight: bold; } .text-2 { margin: 0; font-size: 40px; font-weight: bold; } 基本的に.animation-areaの子要素を絶対配置でレイアウトしています。.animation-areaの高さは100vhを指定していますが、任意の値に変更してもOKです。 CSSアニメーションについて簡単に解説 アニメーションを実装する前にCSSアニメーションについて簡単に解説します。 CSSアニメーションは@keyframesでアニメーションの内容を指定し、animationで@keyframesで指定したアニメーションを動作させます。文章だけでは伝わりにくいので、要素をフェードインで表示するアニメーションを例に解説します。 @keyframesでアニメーションの内容を指定する まず以下のように@keyframesでフェードインのアニメーションを指定します。 @keyframes fadeIn { 0% {opacity: 0;} // アニメーション開始時の状態 100% {opacity: 1;} // アニメーション終了時の状態 } fadeInの部分は任意の値でアニメーションの名前を指定します。このアニメーション名は、アニメーションを動作させる際に必要になります。 0%でアニメーション開始時の要素の状態を指定します。今回の例ではopacity: 0;で要素を透明にしています。 100%でアニメーション終了時の要素の状態を指定します。今回の例ではopacity: 1;で要素を不透明にしています。 以上の指定で、アニメーション開始時は透明だった要素が、終了時には不透明になります。 animationでアニメーションを動作させる アニメーションさせたい要素にanimationを指定します。animationの指定方法は以下のようになります。 .fadein { animation: fadeIn 1s } fadeInは@keyframesで指定したアニメーション名です。1sは1回のアニメーションの再生時間を指定します。この例ではfadeInというアニメーションを1秒間で再生するということになります。 CSSでアニメーションを実装する 先ほどコーディングしたHTMLとCSSにアニメーションを実装していきます。 青色の背景のアニメーションを指定する まずは青色の背景のアニメーションを指定します。青色の背景のCSSは以下のようになります。 bg-blue { left: 0; background-color: #0062ff; animation: bg-blue 0.3s ease-in; } @keyframes bg-blue { 0% {width: 0%;} 100% {width: 50%;} } アニメーション開始時は横幅が0%で、終了時は親要素の50%になるというアニメーションです。animationでease-inをしていますが、これはアニメーションの動かし方です。ease-inはアニメーションがゆっくり始まり、終わりに近づくほど動きが速くなります。他にもease、linear、ease-out、stepsなどがありますが、今回はそれらの説明は割愛します。 黒色の背景のアニメーションを指定 次は黒色の背景のアニメーションを指定します。黒色の背景のCSSは以下のようになります。 .bg-black { right: 0; background-color: #000; animation: bg-black 0.3s ease-in 0.3s backwards; } @keyframes bg-black { 0% {width: 0%;} 100% {width: 50%;} } 基本的には青色の背景のアニメーションと同じです。ただし、ease-inの後に0.3sとbackwardsという指定を追加しています。 0.3sはアニメーション開始を0.3秒遅らせるための指定です。青色の背景のアニメーションが0.3秒で再生されるので、その後に黒色の背景のアニメーションが始まるようにしています。 backwardsはアニメーションが始まるまで、@keyframesの0%の状態を維持します。これを指定しておかないと、青色の背景がアニメーションしている間も黒色の背景がwidth: 0%;にならず表示されている状態になります。 白枠の正方形のアニメーションを指定する 次は白枠の正方形のアニメーションを指定します。白枠の正方形のCSSは以下のようになります。 .square { position: absolute; top: 50%; left: 50%; height: 400px; width: 400px; border: 5px solid #fff; transform: translate(-50%, -50%); animation: square 0.8s ease-in 0.6s backwards; } @keyframes square { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-360deg); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); } } 白枠の正方形には回転のアニメーションを追加しました。アニメーション開始時はtransformのrotate(-360deg)で要素を回転させておき、終了時にはrotate(0deg)で元に戻します。 白文字のアニメーションを指定する 次は白文字のアニメーションを指定します。 白文字のCSSは以下のようになります。 .text-box { position: absolute; top: 50%; left: 50%; color: #fff; text-align: center; transform: translate(-50%, -50%); animation: text-box 1s ease-in 1.4s backwards; } @keyframes text-box { 0% {opacity: 0;} 100% {opacity: 1;} } 白文字は単純なフェードインのアニメーションです。 まとめ 以上がCSSでアニメーションを実装する方法でした。 今回は簡単な例を元に解説しましたが、CSSの指定次第ではもっと複雑なアニメーションを実装することも可能です。世の中にはかっこいいアニメーションを実装しているWebサイトがたくさんあるので、そのようなWebサイトを参考にて色々と試してみるのもいいと思います。 僕ももっと勉強してかっこいいアニメーションを作れるように頑張ります。