ズームイン＆フェードアウト切り替え実装解説｜Zoom Fade In CSS/JS Guide

2026年4月9日

ズームイン＆フェードアウト切り替えデザイン見本

CSS @keyframes で transform: scale() と opacity を組み合わせ、コンテンツをズームインしながら一定時間で自動切り替えするスライドショーの実装パターンをまとめたデモページです。コピーしてすぐに使えるコードを掲載しています。

① ズームイン＆フェードアウト — @keyframes の基本

01 Nature

HTML

<div class="slide active">
  <img src="image.jpg" alt="">
</div>

CSS

.slide {
  position: relative;
  width: 800px;
  height: 450px;
  overflow: hidden;
}

.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.slide.active img {
  animation: zoomFadeIn 5s ease-in-out forwards;
}

@keyframes zoomFadeIn {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

scale() と opacity の組み合わせ

@keyframes で transform: scale(1)（等倍）から scale(1.2)（1.2倍）へ拡大しながら、opacity を 0→1→0 とフェードイン＆フェードアウトします。overflow: hidden を親要素に設定することで、ズーム時にはみ出した部分が隠れ、自然なズーム効果になります。

② setInterval で自動スライドショー — 5秒ごとにズーム切り替え

01Nature

02Ocean

03Sunset

HTML

<div class="slideshow">
  <div class="slide slide-1 active">
    <img src="image-1.jpg" alt="">
  </div>
  <div class="slide slide-2">
    <img src="image-2.jpg" alt="">
  </div>
  <div class="slide slide-3">
    <img src="image-3.jpg" alt="">
  </div>
</div>
<div class="dots">
  <span class="dot active"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

CSS

.slideshow {
  position: relative;
  height: 450px;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
}

.slide.active {
  display: block;
  animation: zoomFadeIn 5s ease-in-out forwards;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

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

.dot.active { background: #fff; }

@keyframes zoomFadeIn {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

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');
}, 5000);

setInterval でスライドを5秒ごとに切り替え

setInterval で5秒ごとに現在のスライドから active クラスを外し、次のスライドに付け直します。クラスが付くたびに @keyframes アニメーションが再起動し、ズームインしながらフェードイン・フェードアウトします。最後のスライドが終わると最初に戻るループ構造です。

③ ズーム倍率を変える — scale() の値と視覚的な違い

Demo Zoom Scale

ズーム値: ×1.2

HTML

<div class="slideshow">
  <div class="slide slide-1 active">
    <img src="image-1.jpg" alt="">
  </div>
  <div class="slide slide-2">
    <img src="image-2.jpg" alt="">
  </div>
  <div class="slide slide-3">
    <img src="image-3.jpg" alt="">
  </div>
</div>

CSS

@keyframes zoomFadeIn {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

.slideshow {
  position: relative;
  height: 450px;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
}

.slide.active {
  display: block;
  animation: zoomFadeIn 5s ease-in-out forwards;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

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

scale() の値で印象が変わる

ズーム倍率が小さい（×1.05）ほど繊細で落ち着いた印象になり、大きい（×1.5）ほど躍動感が増します。Webサイトのメインビジュアルでは scale(1.1)〜scale(1.2) 程度が自然で使いやすいとされています。ボタンを押すとデモとコピー用コードが同時に更新されます。

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

01Spring

02Summer

03Autumn

04Winter

切り替え間隔: 5s

状態: 停止中

HTML

<div class="slideshow">
  <div class="slide slide-1 active">
    <img src="image-1.jpg" alt="">
  </div>
  <div class="slide slide-2">
    <img src="image-2.jpg" alt="">
  </div>
  <div class="slide slide-3">
    <img src="image-3.jpg" alt="">
  </div>
</div>
<input type="range" id="speed-slider" min="1" max="8" step="1" value="5">

CSS

.slideshow {
  position: relative;
  height: 450px;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
}

.slide.active {
  display: block;
  animation: zoomFadeIn 5s ease-in-out forwards;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

@keyframes zoomFadeIn {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

const slides = document.querySelectorAll('.slide');
const slider = document.getElementById('speed-slider');
let pos = 0;
let timer = null;

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

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

slider.addEventListener('input', function() {
  start(this.value * 1000);
});

start(5000);

clearInterval で切り替え間隔を再設定する

スライダーで間隔を変えるには、clearInterval(timer) で現在のタイマーをキャンセルしてから、新しい間隔で setInterval() を呼び直します。timer 変数にタイマーIDを保存しておかないと後からキャンセルできないため、必ず変数に保持しておきましょう。

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

ズームイン＆フェードアウト切り替え 実装解説｜Zoom Fade In CSS/JS Guide

ズームイン＆フェードアウト切り替え デザイン見本

① ズームイン＆フェードアウト — @keyframes の基本

② setInterval で自動スライドショー — 5秒ごとにズーム切り替え

③ ズーム倍率を変える — scale() の値と視覚的な違い

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

ズームイン＆フェードアウト切り替え実装解説｜Zoom Fade In CSS/JS Guide

ズームイン＆フェードアウト切り替えデザイン見本