🍞

CSSのアニメーションでトーストを実装する

2022/08/02に公開

トーストは記事を保存したりエラーが出た時に教えてくれる下や上から出てくるアレ。トーストを焼く機械のアレからトーストが出てくるあの動きからトーストと呼ばれるらしい。案外シンプルな実装例がないのでメモしておきます。

出来上がりはこんな感じ。シャドーが入ってたりするけど適宜抜いて貰えば使えると思う。このページをリロードして貰えばアニメーションの再生が可能。

<html>
    <style>
        div {
            position: fixed;
            top: 0px;
            opacity: 0;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            color: white;
            font-weight: bold;
            padding: 15px 30px;
            border-radius: 10px 10px;
            background-color: rgb(28, 28, 28);
            animation-duration: 2s;
            animation-delay: 1s;
            animation-name: fadein;
            animation-fill-mode: forwards;
            box-shadow: 5px 5px 50px rgb(176, 176, 176);
        }
        span {
            color:rgb(61, 194, 0);
            padding-left: 5px;
            font-weight: bolder;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }
        @keyframes fadein {
            0% {
                opacity: 0;
                top: 0px;
            }
            15% {
                opacity: 1;
                top: 10px;
            }
            95% {
                opacity: 1;
                top: 10px;
            }
            100% {
                opacity: 0;
                top: 0px;
            }
        }
    </style>
    <body>
        <div>
            Saved<span>/</span>
        </div>
    </body>
</html>

下から出てくるバージョンはこちら。コピペして使って下さい。

<html>
    <style>
        div {
            position: fixed;
            right: 30px;
            opacity: 0;     
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            color: white;
            font-weight: bold;
            padding: 15px 30px;
            border-radius: 10px 10px;
            background-color: rgb(28, 28, 28);
            animation-duration: 2s;
            animation-delay: 1s;
            animation-name: fadein;
            animation-fill-mode: forwards;
            box-shadow: 5px 5px 50px rgb(176, 176, 176);
        }
        span {
            color:rgb(61, 194, 0);
            padding-left: 5px;
            font-weight: bolder;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }
        @keyframes fadein {
            0% {
                opacity: 0;
                bottom: 0;
            }
            15% {
                opacity: 1;
                bottom: 20;
            }
            95% {
                opacity: 1;
                bottom: 20;
            }
            100% {
                opacity: 0;
                bottom: 0;
            }
        }
    </style>
    <body>
        <div>
            Saved<span>/</span>
        </div>
    </body>
</html>

Discussion