CSSとJavaScriptで簡単なアニメーションを作ろう

はじめに

この記事では、CSSとJavaScriptを使って、Webページに簡単なアニメーションを実装する方法をご紹介します。
筆者が実際の案件で制作したコードをもとに解説します。
また、有料記事ではソースコードもダウンロードいただけますので、JavaScriptが得意ではない方でも、お使いいただけます。

成果物

本記事では、下記のようにスクロールと連動してアニメーションを実行できる方法をご紹介します。

フェードイン

時間差フェードイン

上へスライドしつつフェードイン

右へスライドしつつフェードイン

下へスライドしつつフェードイン

左へスライドしつつフェードイン

拡大しつつフェードイン

基本的な考え方

上記の成果物のような、スクロールと連動してアニメーションを行わせたい時の基本的な考え方は

「要素が画面内に入ったらアニメーションを実行する」

です。
これをCSS、JavaScriptの役割に分割すると

要素が画面内に入ったら：JavaScriptの仕事
アニメーションを実行する：CSSの仕事

となります。
本記事では、この考え方に基づいてコーディングを行なっていきたいと思います。

アニメーションを実行する

では、アニメーションを実行するために、どのようなCSSを記述すればいいか解説していきます。
ここでは、例として下記のようなフェードインするアニメーションを作っていきます。

アニメーションを行う際はCSSにアニメーションを実行する前と実行した後の状態を記述します。
図で表すと下記のようになります。

これをソースコードにすると下記のようになります。

index.html

<figure class="animation animation-fade-in">
    <img src="img/img_001.png">
</figure>

animation.css

.animation-fade-in {
    opacity: 0;
    transition: 0.8s opacity;
}

.animation-fade-in.animation-active {
    opacity: 1;
}

「animation-fade-in」というクラスが付いた状態がアニメーションを実行する前、「animation-fade-in」と「animation-active」が付いた状態がアニメーションを実行した後の状態を表します。
CSSで使用するのは下記の2つのプロパティです。

opacity：要素の不透明度を設定
transition：要素の2つの状態間の変化を定義

CSSでアニメーションを実行する前（.animation-fade-in）は「opacity: 0;」、実行した後（.animation-fade-in.animation-active）は「opacity: 1;」と指定します。
つまり、アニメーションの前後で要素の透明度が0 → 1に切り替わります。

また、「transition: 0.8s opacity;」と指定していますが、これは「要素の透明度（opacity）を0.8秒かけて変化させる」という意味になります。

このように「opacity」と「transition」を組み合わせることでフェードインのアニメーションを作ることができます。

では、次にJavaScriptを使って要素が画面内に入ったらアニメーションを実行する方法をご紹介します。