【CSS】ブラウザ下部にフワッと現れるメッセージボックスの作り方

2024/09/15

以下の動画のようにブラウザ株にフワッと現れて消えるメッセージボックスを作ったのでメモ。

HTML側はこんな感じの単純なDIV要素を設置しました。

<div class="message"><p>保存しました</p></div>

以下がCSSです。animationと@keyframesで動きを設定しています。

.message{
    width: 400px;
    height: 50px;
    background: black;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    position: fixed;
    right: 32px;
    bottom: 32px;
    animation: popup 2s forwards;
}

.message p{
    vertical-align: middle;
}

@keyframes popup {
    0%{
        transform: translateY(10px);
        opacity: 0;
    }
    20%{
        transform: none;
        opacity: 0.8;
    }
    80%{
        transform: none;
        opacity: 0.8;
    }
    100%{
        transform: translateY(10px);
        opacity: 0;
        pointer-events: none;
    }
}

- HTML/JavaScript