CSSだけで画像をフェードインさせる方法

概要

トップページの画像をフェードインさせる。フェードインしてくると見栄えが全然違ってきます。　　

「アニメーションだからJavaScriptかな・・・」と思いましたが調べてみるとCSSだけで可能でしたのでここに記述します。

※Railsのヘルパーメソッドで作成しました

手順

1.HTMLで画像があるクラスを定義する

2.親クラスにposition: relative;、子クラスに position: absolute;を記述。

3.CSSで「opacity: 0;」「transition:all 1s（任意の時間） ease-in-out;」を記述。

1.HTMLで画像があるクラスを定義する

html.

<div class="first-view">
    <%= image_tag("img1.jpg", class: :top_image) %>
</div>

画像の入っているクラスを作ります。

2.CSSで「opacity: 0;」「transition:all 1s（任意の時間） ease-in-out;」を記述。

css.

.first-view{
  position: relative;
}

.top_image{
  position: absolute;
  opacity: 0;
  transition:all 1s ease-in-out;
}

以上で画像をフェードインすることができる