[CSS] 一定時間経過後に要素を下からスライドインさせる（JavaScript不使用）

公開日:2023/11/02

ウェブサイトに訪れたユーザーに何かしらの通知を行いたいとき、画面の下部から要素をスライドインさせる方法があります。

本来はこのような動的な要素の移動は、画面のスクロールなどのきっかけを必要とする場合が一般的で、JavaScriptなどを用いて行いますが、画面表示から一定時間経過後に表示する方式であれば、CSSだけで実現することができます。

サンプルコード

html

<div class="slide">要素を一定時間経過後にスライドインさせる</div>

CSS

.slide {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    transform: translateY(100%);
    padding: 1em;
    background-color: #3388dd;
    color: #fff;
    text-align: center;
    animation-name: slide_anime;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-delay: 5s;
    animation-direction: normal;
}

@keyframes slide_anime {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
    }
}

要素を閉じるためのボタンをつける

スライドインさせた要素が邪魔になったとき消せるように、「×」ボタンをつけたサンプルです。

非表示にしたチェックボックスを活用することで、CSSだけで要素を消すことができます。

html

<div class="slide">
    <input type="checkbox" id="slide_area">
    <div class="slide_area">
        <label for="slide_area"></label>
        <p>要素を一定時間経過後にスライドインさせる</p>
    </div>
</div>

CSS

.slide input {
    display: none;
}

.slide_area {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    transform: translateY(100%);
    background-color: #3388dd;
    color: #fff;
    text-align: center;
    animation-name: slide_area_anime;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-delay: 5s;
    animation-direction: normal;
}

@keyframes slide_area_anime {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
    }
}

.slide input:checked + .slide_area {
    display: none;
}

.slide_area label {
    display: block;
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%) rotate(45deg);
    width: 1.5em;
    height: 1.5em;
}
.slide_area label:hover {
    cursor: pointer;    
}

.slide_area label::before,
.slide_area label::after {
    position: absolute;
    background-color: #fff;
    content: "";
}
.slide_area label::before {
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 0.2em;
    height: 100%;
}
.slide_area label::after {
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 100%;
    height: 0.2em;
}

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。