フェードインを使った様々なアニメーションのCSS

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

Rerunをクリックで再読み込み↑

CSSの解説

コードを見る

余計な装飾を省いています。

HTML

<div class="fadeIn">フェードイン</div>

CSS

/*** フェードイン ***/
.fadeIn{
  opacity: 0;
  animation: 1s fadeIn-anim forwards; 
}
@keyframes fadeIn-anim{
  from{opacity: 0;}
  to{opacity:1;}
}

@keyframesを使用してアニメーションの挙動を設定する
- 開始地点fromはopacity:0で透明に
- 到達地点toにopacity:0で不透明に
アニメーションさせたい要素に任意のクラスを付与する
クラスにopacityとanimationを設定
- 初期状態で透明にするためopacity:0に
- animationには最低でも「animation: 時間アニメーション名 forwards」を記載(delayは任意)

opacityと併せてtranslate()による座標移動を使うと、出現しながら動くふわっとしたアニメーションにすることができます。

あらかじめtranslateY()で位置を下にずらしておき、表示と同時にtranslate(0)で元の位置まで上に動かします。

See the Pen fadeInUp by チータツ (@cheese_fuji) on CodePen.

Rerunで再度動きます↑

フェードインアップと逆で、translateY()にマイナス値を入れて上にずらしておきます。

See the Pen fadeInDown by チータツ (@cheese_fuji) on CodePen.

Rerunで再度動きます↑

translateX()を使って右方向にずらして、表示のタイミングでtranslate(0)を使って左まで戻します。

See the Pen FadeInLeft by チータツ (@cheese_fuji) on CodePen.

Rerunで再度動きます↑

フェードインレフトとは逆で、fromのtranslateY()にマイナス値を入れておきます。

See the Pen FadeInRight by チータツ (@cheese_fuji) on CodePen.

Rerunで再度動きます↑

jQueryを使用したスクロールアニメーションです。最もよく見かけるフェードインの使い方かもしれません。

jQueryでスクロール位置を取得して、表示範囲内に入った時に要素に.activeクラスを付与。.fadeIn.activeが揃った時だけアニメーションを行います。