トースト通知（Toast Notification）はどんな効果ですか？

右上からスライドインして自動で消えるトースト通知。保存完了・コピー成功などのフィードバックに。ダイアログ・通知・サイドドロワー・確認ポップアップなど、前面に出すUIの開閉に向く演出です。

Toast NotificationはCSSだけで実装できますか？

見た目はCSSで作れますが、動きの制御にJavaScriptを併用します。本ページではHTML・CSS・JavaScriptのコードをまとめて掲載しています。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Toast Notification — CSS+JS Effect with AI Prompt

CODE

HTML

<div class="demo-stage toast-stage"><button class="toast-btn" type="button">SHOW TOAST</button><div class="toast"><span class="toast-ico">✓</span><span>Saved successfully</span></div></div>

CSS

.toast-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; overflow:hidden; }
.toast-btn { background:#E91B89; border:none; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.78rem; padding:.6rem 1.3rem; cursor:pointer; border-radius:6px; }
.toast { position:absolute; top:1rem; right:1rem; display:flex; align-items:center; gap:.6rem; background:#1A1A1A; border:1px solid rgba(16,185,129,.4); color:#fff; font-family:'Inter',sans-serif; font-size:.85rem; padding:.8rem 1.1rem; border-radius:10px; transform:translateX(140%); opacity:0; transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s; }
.toast.show { transform:translateX(0); opacity:1; }
.toast-ico { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#10B981; color:#fff; font-size:.7rem; }

(function(){
  var btn = document.querySelector('.toast-btn'), toast = document.querySelector('.toast');
  if(!btn || !toast) return;
  var timer;
  btn.addEventListener('click', function(){
    toast.classList.add('show');
    clearTimeout(timer);
    timer = setTimeout(function(){ toast.classList.remove('show'); }, 2200);
  });
})();

AI PROMPT

Claude Cursor v0

PROMPT

右上からスライドインして自動で消えるトースト通知を作って。トーストは position:absolute; top/right で右上配置、初期 transform:translateX(140%) + opacity:0、showクラスで translateX(0) + opacity:1（transitionに cubic-bezier(.34,1.56,.64,1)）。ボタンクリックでshow付与し、setTimeoutで約2.2秒後にshowを外す（連打対策に clearTimeout）。保存完了・コピー成功のフィードバックに。

トースト通知（Toast Notification）とは

右上からスライドインして自動で消えるトースト通知。保存完了・コピー成功などのフィードバックに。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

ダイアログ・通知・サイドドロワー・確認ポップアップなど、前面に出すUIの開閉に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。