フェードイン切り替え実装解説｜Fade-In Rotation CSS & JS Guide

2026年4月8日

フェードイン切り替えデザイン見本

JavaScript の setInterval() と CSS の @keyframes を組み合わせ、一定時間ごとに要素をフワッと切り替える実装パターンをまとめたデモページです。コピーしてすぐに使えるコードを掲載しています。

① 基本フェードイン — opacity アニメーション

こんにちは！

HTML

<p class="message appear">こんにちは！</p>

CSS

.message {
  display: none;
  text-align: center;
  font-size: 1.5rem;
}

.message.appear {
  display: block;
  animation: fadeIn 2s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes と opacity の基本

@keyframes fadeIn では opacity: 0（透明）から opacity: 1（不透明）へ変化させます。animation: fadeIn 2s ease-out forwards と設定すると、2秒かけてゆっくりフワッと現れます。forwards を付けることでアニメーション終了後も opacity: 1 が維持され、表示が消えません。

② setInterval でテキストをローテーション — 3秒ごとに自動切り替え

こんにちは！

Hello!

你好！

Bonjour！

Guten Tag！

状態: 停止中

HTML

<p class="message appear">こんにちは！</p>
<p class="message">Hello!</p>
<p class="message">你好！</p>
<p class="message">Bonjour！</p>
<p class="message">Guten Tag！</p>

CSS

.message {
  display: none;
  text-align: center;
  font-size: 1.5rem;
}

.message.appear {
  display: block;
  animation: fadeIn 2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

const messages = document.querySelectorAll('.message');
let pos = 1;

function rotate() {
  if (pos >= messages.length) pos = 0;
  messages.forEach(m => m.classList.remove('appear'));
  messages[pos].classList.add('appear');
  pos++;
}

setInterval(rotate, 3000);

setInterval と appear クラスの付け外し

setInterval(rotate, 3000) で rotate 関数を 3000ms（3秒）ごとに呼び出します。rotate では全メッセージから appear クラスを外してから、次の要素に付け直します。クラスが付くたびに @keyframes アニメーションが再起動するため、連続してフワッとした切り替えになります。

③ clearInterval で切り替え速度を変更

春 Spring

夏 Summer

秋 Autumn

冬 Winter

切り替え間隔: 2s

状態: 停止中

HTML

<p class="message appear">春 Spring</p>
<p class="message">夏 Summer</p>
<p class="message">秋 Autumn</p>
<p class="message">冬 Winter</p>

<input type="range" id="speed-slider" min="1" max="5" step="1" value="2" />

CSS

.message {
  display: none;
  text-align: center;
  font-size: 1.5rem;
}

.message.appear {
  display: block;
  animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#speed-slider {
  display: block;
  margin: 16px auto;
  width: 200px;
  cursor: pointer;
}

const messages = document.querySelectorAll('.message');
let pos = 1;
let timer = null;

function rotate() {
  if (pos >= messages.length) pos = 0;
  messages.forEach(m => m.classList.remove('appear'));
  messages[pos].classList.add('appear');
  pos++;
}

function start(ms) {
  if (timer) clearInterval(timer);
  timer = setInterval(rotate, ms);
}

start(2000);

clearInterval で再設定する

切り替え速度を変えるには、既存のタイマーを clearInterval(timer) でキャンセルしてから新しい間隔で setInterval() を呼び直します。timer 変数にタイマーIDを保存しておくことが重要です。保存しておかないと後からキャンセルできなくなります。

④ カラーパネルのスライドショー — 画像切り替えへの応用

01 Nature

02 Ocean

03 Sunset

HTML

<div class="slideshow">
  <div class="slideshow-inner">
    <div class="slide slide-1 active">
      <span class="slide-num">01</span>
      <span class="slide-txt">Nature</span>
    </div>
    <div class="slide slide-2">
      <span class="slide-num">02</span>
      <span class="slide-txt">Ocean</span>
    </div>
    <div class="slide slide-3">
      <span class="slide-num">03</span>
      <span class="slide-txt">Sunset</span>
    </div>
  </div>
  <div class="dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS

.slideshow-inner {
  position: relative;
  height: 220px;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.slide.active {
  display: flex;
  animation: fadeIn 1s ease-out forwards;
}

.slide-1 { background: linear-gradient(135deg, #134e4a, #065f46 50%, #064e3b); }
.slide-2 { background: linear-gradient(135deg, #1e3a5f, #1e40af 50%, #1d4ed8); }
.slide-3 { background: linear-gradient(135deg, #7c2d12, #c2410c 50%, #ea580c); }

.slide-num {
  font-size: 3rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.2);
  line-height: 1;
}

.slide-txt {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.1em;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  background: #0f172a;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.3s;
}

.dot.active {
  background: #7c3aed;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
let pos = 0;

setInterval(function() {
  slides[pos].classList.remove('active');
  dots[pos].classList.remove('active');
  pos = (pos + 1 >= slides.length) ? 0 : pos + 1;
  slides[pos].classList.add('active');
  dots[pos].classList.add('active');
}, 3000);

画像スライドショーへの応用

各 .slide の中に <img> を配置することで、Webサイトのメインビジュアルでよく見られる「画像がフワッと切り替わるスライドショー」が実現できます。スライドは position: absolute で重ねて配置し、display: none と display: flex の切り替えでアニメーション付き表示を制御します。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

フェードイン切り替え 実装解説｜Fade-In Rotation CSS & JS Guide

フェードイン切り替え デザイン見本

① 基本フェードイン — opacity アニメーション

② setInterval でテキストをローテーション — 3秒ごとに自動切り替え

③ clearInterval で切り替え速度を変更

④ カラーパネルのスライドショー — 画像切り替えへの応用

フェードイン切り替え実装解説｜Fade-In Rotation CSS & JS Guide

フェードイン切り替えデザイン見本