【JS&CSS】下からフワっと出るポップアップウィンドウの作り方

2025年7月3日

ボタンをクリックすると、画面右下からフワッと現れるメッセージウィンドウ（ポップアップウィンドウ）の作り方を公開します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！

実装例とコード

ボタンをクリックすると、右下にポップアップメッセージが表示されます。

下からスッと現れて、3秒ほど留まったあとに、またスッと消えていきます。

コード

ポップアップ表示のような複雑なアニメーションには、CSSプロパティの@keyframesを使います！
基本的な構文は以下のようになります。

div.animation {
  animation: 1s xxx;
}

@keyframes xxx {   /* xxxは好きな名前でOK */
  0% {
    /* 変化前の状態 */
    property:value;
  }
  50% {
    /* 変化中の状態。%の値は自由に決められ、複数用意してもOK。 */
    property:value;
  }
  100% {
    /* 変化後の状態 */
    property:value;
  }
}

まず、@keyframeで変化の内容を記述します。
次に、変化をつけたい要素（上の例ではdiv.animation）にアニメーション名（上の例ではxxx）と変化時間（上の例では1s）を記載します。

これで、div.animaiton要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。

シンプルなアニメーションについてはこちら

マウスホバーやボタンクリック（タップ）に反応するような、シンプルなアニメーションにはtransformやtransitionを使います。以下のような実装に向いています。

あわせて読みたい

【JS&CSS】クリック（タップ）で画像を拡大させる transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…

HTML/CSS/JavaScript コードはこちら

<div class="button-box">
  <button>Click!</button>
</div>
<div class="message hidden">Have a nice day!</div>

.button-box {
  width: 100%;
  padding: 8px 16px;
  margin: 16px auto;
}

button {
  width: 50%;
  max-width: 300px;
  height: 2.5em;
  margin: 8px auto;
  padding: 4px 0;
  border-radius: 4px;
  background-color: blue;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

button:hover {
  opacity: .7;
}

.hidden {
  display: none;
}

.message {
  width: 25%;
  min-width: 300px;
  height: 100px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ddd;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  position: fixed;
  right: 5%;
  bottom: 10%;
}

.popup-message {
  animation: popup 3s forwards;
}

@keyframes popup {
  0% {
    transform: translateY(15%);
    opacity: 0;
  }
  10%, 90% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(15%);
    opacity: 0;
    pointer-events: none;
  }
}

@keyframesでpopupというアニメーションを設定。
- 最初(0%)はtransform: translateY(15%);で画面下側に配置、opacity: 0;で見えないようにする。
- 続いて(10〜90%)、transform: none;で元の位置に戻し、opacity: 1;で見える状態に。
- 最後(100%)はtransform: translateY(15%);で画面下側に移動させ、opacity: 0;で再び見えないようにする。
  - 上記を3秒かけて実行することで、「フワッと現れてフワッと戻る」というアニメーションになる。
JavaScriptで、このアニメーションを設定したクラス（popup-message）をボタンクリックで付け外しする。

const message = document.querySelector('.message');

document.querySelector('button').addEventListener('click', () => {
  message.classList.remove('hidden');
  message.classList.add('popup-message');
});

message.addEventListener('animationend', () => {
  message.classList.remove('popup-message');
  message.classList.add('hidden');
});

ボタンクリックで、メッセージウィンドウに「hidden」と「popup-message」クラスを付け外しできるようにする。
animationendは、アニメーションが完了したときに実行されるイベント。アニメーションが完了したときに、メッセージウィンドウのクラスの状態を元に戻す。

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