スライドイン表示 デザイン見本
CSS の animation と @keyframes、clip-path: inset() を組み合わせて、要素を左右上下の方向からスライドイン表示する実装パターンをまとめたデモページです。コピーしてすぐに使えるコードを掲載しています。
① 左からスライドイン — clip-path で徐々に表示
<div class="reveal-text">テキストが左から右へ、ゆっくり表示されます。</div>.reveal-text {
animation: revealText 2s ease-out forwards;
display: inline-block;
color: white;
font-weight: bold;
background-color: orange;
padding: 12px 24px;
font-size: 18px;
border-radius: 4px;
}
@keyframes revealText {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0% 0 0); }
}clip-path: inset() は要素を内側から切り抜くプロパティです。inset(0 100% 0 0) は右辺から 100% 切り取るため要素が完全に隠れ、inset(0 0% 0 0) で全体が表示されます。この変化を @keyframes で定義することで、左から右へ徐々に現れるスライドイン効果が生まれます。
② 方向別スライドイン — 上下左右を切り替え
方向: 左から
<div class="slide-in">Direction Slide In</div>.slide-in {
animation: slideIn 0.8s ease-out forwards;
display: inline-block;
padding: 12px 32px;
background: #7c3aed;
color: white;
font-weight: bold;
border-radius: 8px;
}
@keyframes slideIn {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0% 0 0); }
}inset(上 右 下 左) の各辺を 100% にすることで、4方向のスライドインを表現できます。
左から: 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 で順番に表示
<div class="cascade-list">
<div class="cascade-item" style="animation-delay: 0s">Item 1</div>
<div class="cascade-item" style="animation-delay: 0.2s">Item 2</div>
<div class="cascade-item" style="animation-delay: 0.4s">Item 3</div>
<div class="cascade-item" style="animation-delay: 0.6s">Item 4</div>
</div>.cascade-item {
animation: slideFromLeft 0.6s ease-out both;
background: #2563eb;
color: white;
padding: 10px 20px;
margin-bottom: 8px;
border-radius: 6px;
font-weight: bold;
}
@keyframes slideFromLeft {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0% 0 0); }
}animation-delay に各アイテムで異なる遅延（0s, 0.2s, 0.4s…）を設定すると、順番に現れるカスケード表現が作れます。fill-mode: both を指定すると、遅延中はアニメーション開始前のスタイル（非表示状態）が保持されるため、遅延時間中に要素が見えてしまう問題を防げます。
④ タイミング関数 (timing-function) の違いを比較
<div class="bar-row">
<span class="bar-label">ease-out</span>
<div class="bar bar-easeout"></div>
</div>
<div class="bar-row">
<span class="bar-label">linear</span>
<div class="bar bar-linear"></div>
</div>
<div class="bar-row">
<span class="bar-label">ease-in-out</span>
<div class="bar bar-easeinout"></div>
</div>.bar-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.bar-label {
font-size: 12px;
width: 90px;
text-align: right;
}
.bar {
height: 28px;
flex: 1;
border-radius: 4px;
clip-path: inset(0 100% 0 0);
}
.bar-easeout { background: #f97316; animation: barSlide 2s ease-out forwards; }
.bar-linear { background: #2563eb; animation: barSlide 2s linear forwards; }
.bar-easeinout { background: #7c3aed; animation: barSlide 2s ease-in-out forwards; }
@keyframes barSlide {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0% 0 0); }
}
ease-out: 最初に速く、終わりにゆっくり。スライドインで自然な勢いを表現するのに最適。
linear: 一定速度。均一な動きが必要なローディング的な表現に向いています。
ease-in-out: 始まりと終わりがゆっくり、中間が速い。滑らかで落ち着いた印象になります。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
