スライドイン表示の作り方｜clip-path と @keyframes

2026年8月1日

clip-path で要素を左右上下から現す

CSS の clip-path: inset() と @keyframes で、要素を左右上下からスライドイン表示する方法を4パターンで解説します。各デモと同じ動きを再現できるHTML・CSSを掲載しています。
HTML・CSS・JSコードプレビューツールでも動作を確認できます。

このページで作るもの

左からスライドイン
上下左右の切り替え
順番に現れるカスケード
タイミング関数の比較

① 左からスライドイン — clip-path で徐々に表示

テキストが左から右へ、ゆっくり表示されます。

HTML

<div class="sl-basic-box">テキストが左から右へ、ゆっくり表示されます。</div>

CSS

.sl-basic-box {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  background: #f97316;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  animation: slBasicReveal 2s ease-out forwards;
}

@keyframes slBasicReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

clip-path: inset(上右下左)

inset() は要素を内側から切り抜きます。inset(0 100% 0 0) は右側を 100% 隠すので見えず、inset(0 0% 0 0) で全体が表示されます。この変化を @keyframes に書くと、左から右へ現れる動きになります。

② 方向別スライドイン — 上下左右を切り替え

Direction Slide In

方向: 左から

HTML

<div class="sl-dir-box">Direction Slide In</div>

CSS

.sl-dir-box {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 8px;
  background: #7c3aed;
  color: #fff;
  font-weight: 700;
  animation: slDirReveal 0.8s ease-out forwards;
}

@keyframes slDirReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

inset() の方向マッピング

隠す辺を 100% にすると、その反対側から現れる動きになります。
左から: inset(0 100% 0 0) → inset(0 0 0 0)
右から: inset(0 0 0 100%) → inset(0 0 0 0)
上から: inset(0 0 100% 0) → inset(0 0 0 0)
下から: inset(100% 0 0 0) → inset(0 0 0 0)

③ カスケード — animation-delay で順番に表示

Item 1

Item 2

Item 3

Item 4

HTML

<div class="sl-cascade-list">
  <div class="sl-cascade-item" style="animation-delay: 0s">Item 1</div>
  <div class="sl-cascade-item" style="animation-delay: 0.2s">Item 2</div>
  <div class="sl-cascade-item" style="animation-delay: 0.4s">Item 3</div>
  <div class="sl-cascade-item" style="animation-delay: 0.6s">Item 4</div>
</div>

CSS

.sl-cascade-item {
  margin-bottom: 8px;
  padding: 10px 20px;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  animation: slCascadeReveal 0.6s ease-out both;
}

@keyframes slCascadeReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

animation-delay と fill-mode: both

各要素に 0s / 0.2s / 0.4s… と遅延をずらすと、順番に現れるカスケードになります。both を付けると、遅延中も開始前の状態（見えない状態）が保たれ、待ち時間中に要素が先に見えてしまうのを防げます。

④ タイミング関数 — ease-out / linear / ease-in-out

ease-out

linear

ease-in-out

HTML

<div class="sl-bar-row">
  <span class="sl-bar-label">ease-out</span>
  <div class="sl-bar sl-bar-easeout"></div>
</div>
<div class="sl-bar-row">
  <span class="sl-bar-label">linear</span>
  <div class="sl-bar sl-bar-linear"></div>
</div>
<div class="sl-bar-row">
  <span class="sl-bar-label">ease-in-out</span>
  <div class="sl-bar sl-bar-easeinout"></div>
</div>

CSS

.sl-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.sl-bar-label {
  width: 90px;
  font-size: 12px;
  text-align: right;
  color: #475569;
}

.sl-bar {
  flex: 1;
  height: 28px;
  border-radius: 4px;
  clip-path: inset(0 100% 0 0);
}

.sl-bar-easeout {
  background: #f97316;
  animation: slBarReveal 2s ease-out forwards;
}

.sl-bar-linear {
  background: #2563eb;
  animation: slBarReveal 2s linear forwards;
}

.sl-bar-easeinout {
  background: #7c3aed;
  animation: slBarReveal 2s ease-in-out forwards;
}

@keyframes slBarReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

timing-function の選び方

ease-out は最初が速く終わりがゆっくりで、スライドインに自然な勢いが出ます。linear は一定速度。ease-in-out は始まりと終わりがゆっくりで、落ち着いた印象になります。

注意点：ページ読み込み時に一度だけ動かしたい場合は、ボタンなしで animation を書いておけば足ります。繰り返し再生したいデモでは、クラスを外してから付け直す（強制再フロー）と再開できます。また clip-path は古いブラウザで未対応のことがあるため、必須情報の表示手段にはしない方が安全です。

transform のスライドと何が違いますか？

transform: translateX() は要素そのものを動かします。clip-path は見える範囲だけを変えるので、レイアウト上の位置はそのままです。テキストの拭い出し表現などに向いています。

アニメーションを最初から再生し直すには？

一度クラスを外し、要素の寸法を読んでから（再フロー）、再生用クラスを付け直します。このページの「アニメーション開始」ボタンも同じ方法です。

スクロールで発火させたいときは？

表示領域に入ったタイミングでクラスを付ける必要があります。Intersection Observer と組み合わせると実装しやすいです。

カスケードで遅延中に要素が見えます

animation-fill-mode: both（短縮なら both）を付けてください。遅延中も開始前のクリップ状態が保たれます。

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