CSSだけでフェイドインのエフェクトを実装する方法

フェードインとは
@keyframesとanimationプロパティを使用
1. 詳細を見ていきましょう
2. フェードインさせたい要素にclass指定する
いかがでしたか？

フェードインとは

透明な状態から、だんだん表示されていくエフェクトです。X軸、Y軸の動きも加えることで、カッコいい雰囲気になります。

@keyframesとanimationプロパティを使用

フェ―ドインを実装できると、サイトの雰囲気もずいぶん変わるかと思います。上下左右のバージョンを作ってみました。

サンプルをご覧ください。↓

fadein sample

HTMLコードは以下の通り。↓

 <div class="sample">
    <h4>左からフェ―ドイン</h4>
    <p class="left">サンプルです</p> 
 </div>
 
 <div class="sample">
   <h4>右からフェ―ドイン</h4>
   <p class="right">
   サンプルです
   </p> 
 </div>
 <div class="sample">
  <h4>上からフェ―ドイン</h4> 
   <p class="upper">
 サンプルです
 </p> 
 </div>
 <div class="sample">
  <h4>下からフェ―ドイン</h4>
   <p class="bottom">
 サンプルです
 </p>

CSSコードは以下の通り。↓

@keyframes slide-left{
  0% {
  opacity:0;
transform:translateX(-50px);
   }
100% {
  opacity:1;
transform:translateX(0px);
}
}
@keyframes slide-right{
  0% {
  opacity:0;
transform:translateX(50px);
   }
100% {
  opacity:1;
transform:translateX(0px);
}
}
@keyframes slide-upper{
  0% {
  opacity:0;
transform:translateY(-50px);
   }
100% {
  opacity:1;
transform:translateX(0px);
}
}
@keyframes slide-bottom{
  0% {
  opacity:0;
transform:translateY(50px);
   }
100% {
  opacity:1;
transform:translateX(0px);
}
}
.sample{
  border-bottom: solid 1px gray;
}
p{
  width:300px;
  border: solid 1px gray;
  margin:50px auto;
  font-size: 30px;
  text-align: center;
}
.left{
  animation : slide-left 2s infinite;
}
.right{
  animation :slide-right 2s infinite;
}
.upper{
  animation: slide-upper 2s infinite;
}
.bottom{
  animation: slide-bottom 2s infinite;
}

詳細を見ていきましょう

@keyframesに名前を付けます。

今回は４パターン。左、右、上、下の順番で作成しました。

左からのフェードインのパターンを見てみましょう。CSSコードです。↓

@keyframes slide-left{
  0% {
  opacity:0;
transform:translateX(-50px);
   }
100% {
  opacity:1;
transform:translateX(0px);
}
}
.left{
  animation : slide-left 2s infinite;
}

@keyframesの名前を「slide-left」にしました。0%時にopacity:0;（非表示）、transform:translateX(-50px);（X軸方向に－50px）と指定してあります。

100％時にopacity:1（表示）、transform:translateX(0px);（X軸方向に0px）、となり、徐々に左側から文字や画像がフェードインしてくるように見える仕掛けです。

フェードインさせたい要素にclass指定する

以下の部分を、左側からフェードインさせたい要素に、class指定すればよいわけです。「2s」は「2秒かけてアニメーションを行う」、「infinite」は「アニメーションを無限に繰り返す」という指定です。秒数や回数はお好みで変えましょう。↓

.left{
  animation : slide-left 2s infinite;
}

サンプルでは、「サンプルです」という文字にclass指定してあります。↓

 <p class="left">サンプルです</p>

もちろん画像などにも指定できます。

いかがでしたか？

簡単ですね！CSSだけでフェードインを実装し、動きのあるサイトの作成が可能になります。

フェードインについては、以下の記事も参考にどうぞ。↓

CSSだけでフェ―ドインのエフェクトを実装する方法