CSSでフェードインアニメーションを実装する方法:コピペOK

WEB制作/デザイン

今回はCSSを使用してフェードインアニメーションの実装の仕方を説明していきます。通常のフェードインの他に、左右上下からのフェードインもあります。また初心者の人でも使いやすく基本的に丸々コピペでOKな様にしますのでぜひ使ってみて下さい。

アニメーションの設定

CSSでアニメーションを作るには「animation」プロパティを使って下記の様にスタイルシートにアニメーション設定の記述を行います。

.animation1 {
    // アニメーション設定
    animation-name: animation1; //アニメーションの名前
    animation-duration: 3s; //アニメーション時間
    animation-timing-function: ease-out; //アニメーションさせるイージング
    animation-delay: 1s; //アニメーション開始させる時間
    animation-iteration-count: 1; //繰り返し回数
    animation-direction: normal; //往復処理をするかどうか
    animation-fill-mode: forwards; //アニメーション後のスタイルをどうするか
  }

アニメーションを行う

次に「@keyframes」を定義する事で、定義されたアニメーション名を持つ「animation」の規則に沿って動作が行われます。

下記が、実際に記述したアニメーションです。

アニメーション1(フェードイン)

HTML/CSSの記述は以下の様。(コピペOK)

<p class="an1-fadein">アニメーション1(フェードイン)</p>

<style>
.an1-fadein {
    background-color:#ff7f50;
    font-size: 30px;
    font-weight: bold;
    animation-name: fadein;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes fadein {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
</style>

今回は分かりやすくするために「animation-iteration-count(繰り返し回数)」を「infinite(無限)」に設定しています。ここを「1」にすれば繰り返しは無くなります。

また「transform:」に値を付ければどの方向からフェードインするかを指定できます。以下からの記述は左右上下のフェードインの見本です。

下からフェードイン(コピペOK)

アニメーション2(フェードアップ)

<p class="an2-fadeup">アニメーション2(フェードアップ)</p>

<style>
.an2-fadeup {
    background-color:#ff7f50;
    font-size: 30px;
    font-weight: bold;
    animation-name: fadeup;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes fadeup {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
</style>

上からフェードイン(コピペOK)

アニメーション3(フェードダウン)

<p class="an3-fadedown">アニメーション3(フェードダウン)</p>

<style>
.an3-fadedown {
    background-color:#ff7f50;
    font-size: 30px;
    font-weight: bold;
    animation-name: fadedown;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes fadedown {
from {
    opacity: 0;
    transform: translateY(0);
}
to {
    opacity: 1;
    transform: translateY(20px);
}
}
</style>

横から(右から左)(コピペOK)

アニメーション4(フェードレフト)

<p class="an4-fadeleft">アニメーション4(フェードレフト)</p>

<style>
.an4-fadeleft {
    background-color:#ff7f50;
    font-size: 30px;
    font-weight: bold;
    animation-name: fadeleft;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes fadeleft {
from {
    opacity: 0;
     transform: translateX(150px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
</style>

横から(左から右)(コピペOK)

アニメーション5(フェードライト)

<p class="an5-faderight">アニメーション5(フェードライト)</p>

<style>
.an5-faderight {
    background-color:#ff7f50;
    font-size: 30px;
    font-weight: bold;
    animation-name: faderight;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes faderight {
from {
    opacity: 0;
    transform: translateX(0);
}
to {
    opacity: 1;
transform: translateX(150px);
}
}
</style>

以上が「CSSでフェードインアニメーションを実装する方法:コピペOK」でした。

アニメーションの技術は最近のWEB制作では必須かなと思うくらい当たり前の様に使われているので、まずは今回の様にCSSで簡単に実装できる方法から身につけていきましょう。