【CSSアニメーション】フェードインの作り方も有り【コピペ可・サンプル】

SHARE

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

動きのあるWebサイトを作りたければ、jQueryを使わなくても、CSSのみで動きをつけることができます。

CSSでアニメーションを作る方法の解説をしていきます。

今回は基本のフェードインから、Webサイト制作に便利なサンプルを紹介します。

紹介するコードは、コピペ可ですのでぜひ活用してください。

ゴロー
ゴロー

一緒にCSSでアニメーションの作り方を勉強しましょう！

目次 表示

目次へ

CSSアニメーションのコード全体像（フェードイン）

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

CSSでアニメーションを作る流れ

  1. 動きをつけたい要素を決める（classをつけると管理しやすい）
  2. animation-nameを設定する
  3. animation プロパティそれぞれのサブプロパティを設定する
  4. @keyframesを設定する

では、上記の流れに沿って解説していきます。

1.動きをつけたい要素を決める（classをつけると管理しやすい）

動きをつけたい要素とは、例えばdivとかですね。

ただし、要素を決めるときに注意点があります。

注意点

spanなどのインライン要素を動かしたい場合は、display:blockでブロック要素に変更しておいてください。

2.animation-nameを設定する

animation-nameとは、MDN Web Docsによると、

アニメーションのキーフレームを示す @keyframes アットルールの名前を指定します。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations

つまり、後ほど解説する@keyframesに使用する名前をつけるということです。

animation-nameと、@keyframesの使用する名前は同一のものを指定します。

あとで管理しやすいようにわかりすい名前をつけておきましょう。

該当コード

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

上記コードのanimation-name: fadeInAnimation;部分です。

@keyframesの名前と同じならOKです。

3.animation プロパティそれぞれのサブプロパティを設定する

それでは、個別のサブプロパティについて解説していきます。

よく使うものを厳選して紹介します。

animation-duration

1 回のアニメーションサイクルに要する時間の長さを設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations

つまり、フェードインを例にすると、透明度0%〜100%になるまで何秒かかるかの設定です。

該当コード

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

上記コードのanimation-duration: 1.5s;部分です。

1.5秒間アニメーションが動くということです。

animation-timing-function

アニメーションの進め方を設定します。 これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations

animation-timing-functionに設定できる値

下記以外にも設定できる値はありますが、最初はこれらの値から試してみましょう。

ease
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。

linear
cubic-bezier(0.0, 0.0, 1.0, 1.0) と同じで、等しい速度でアニメーションします。

ease-in
cubic-bezier(0.42, 0, 1.0, 1.0) と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。

ease-out
cubic-bezier(0, 0, 0.58, 1.0) と同じで、アニメーションは速く始まり、速度を落としながら続きます。

https://developer.mozilla.org/ja/docs/Web/CSS/animation-timing-function

上記は難しく書かれていますが、よくわからなければ、最初はlinearを選び、ease、ease-inと色々な値を試して、動き方を見て調整しましょう。

該当コード

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-timing-function: linear;

}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

上記コードのanimation-timing-function: linear;部分です。

アニメーションが動くタイミングが等間隔ということですね。

animation-delay

要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations

要素が読み込まれて何秒か遅らせてから動かしたい場合につけます。

1秒なら、1sと指定します。

該当コード

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 1s;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

上記コードのanimation-delay: 1s;部分です。

アニメーションが開始するまで1秒間アニメーションが遅らせて動かします。

animation-iteration-count

アニメーションを繰り返す回数を設定します。 アニメーションを無限に繰り返すには infinite を指定してください。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations

アニメーションを繰り返したければ、infiniteを設定しましょう。繰り返す必要がなければ、設定する必要はありません。

該当コード

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-iteration-count: infinite;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

上記コードのanimation-iteration-count: infinite;部分です。

アニメーションを繰り返し実行します。

animation-fill-mode

アニメーションの実行前後に、指定したスタイルを適用するかを設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations

これは、animation-durationで遅らせてから動かすときに、アニメーションの実行前（動き出す前）とアニメーションの実行後（動いた後）の表示の設定です。

animation-fill-modeに設定できる値

none
アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。

forwards
対象は実行の最後のキーフレームで設定された計算値を保持します。最後のキーフレームは animation-direction と animation-iteration-count の値によって変わります。

backwards
アニメーションは最初の適切なキーフレームで定義された値を対象に適用されると同時に適用し、 animation-delay の期間これを保持します。最初の適切なキーフレームは、 animation-direction の値によって変わります。

both
アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。

https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode

上記を解説すると、

noneアニメーション実行前後にスタイルを適用しない。アニメーション再生時のみ、@keyframesが適用される。
forwardsanimation-delayを指定していたら、実行までは@keyframesは適用されない。アニメーション実行後は、終了時の@keyframes（100%）のスタイルが適用される。
backwardsanimation-delayを指定していたら、実行までは@keyframes（0%）が適用される。アニメーション実行後は、開始時の@keyframes（0%）が適用される。
bothアニメーション実行後は、終了時の@keyframes（100%）のスタイルが適用される。animation-delayを指定していたら、実行までは@keyframes（0%）が適用される。

該当コード

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

上記コードのanimation-fill-mode: forwards;部分です。

4.@keyframesを設定する

該当コード

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

上記コードの0%がアニメーションの開始時の値です。

opacity: 0;なので、透明度の0%を設定しています。

100%がアニメーションの終了時の値です。

opacity: 1;なので、透明度の100%を設定しています。

中間地点を追加してもいい

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

上記コードは実際にはあまり必要のないコードかもしれませんが、0%と100%の間に25%、50%などを任意の数分、追加することもできます。

0%と100%があれば間は補完してくれますので、細かく制御したい場合に中間地点を追加します。

プロパティは何を指定できる？

widthや、transform: rotate();など、すべてのCSSプロパティを指定できます。

フェードインアニメーションサンプル（コピペ可）

最後紹介するのは、今回の解説で使用したフェードインアニメーションのコードです。

コピペして使用してもらって大丈夫ですので、活用してみてください。

DEMO

アニメーションが動かない場合は、ブラウザの再読み込みをして確認してください。

文字がフェードインする

HTML

<p class="fadeIn">文字がフェードインする</p>

CSS

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

まとめ

今回はCSSアニメーションについて解説しました。

CSSアニメーションの書き方を始めて知ったときは、思ったより簡単にアニメーションが作れることに感動したことを覚えています。

皆さんも良いWebデザインライフを〜。ではまたノシ。

前の記事

【WordPress・プラグイン無し】記事本文の文字数を制限す…

次の記事

WordPressの投稿画面が真っ白になった時の対策