애니메이션 바닥글

이 애니메이션 바닥글은 페이지 하단에서 슬라이드 인됩니다. CSS transform 속성을 사용하여 효과를 만들 수 있습니다. 결과적으로 레이아웃 변경을 일으키지 않는 성능을 갖춘 애니메이션이 생성됩니다.

HTML

<div id="banner" class="banner">
  <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
  <div>
    <h1>Notice</h1>
    Lorem ipsum dolor sit amet.
  </div>
</div>

CSS


        body {
    overscroll-behavior-y: none;
    font-family: system-ui;
    padding: 2em;
    background-color: #f4f4f4;
}
.banner {
    animation: slideIn 1000ms ease-in-out;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
@keyframes slideIn {
    from {
        transform: translateY(100vh);
    }
    to {
        transform: translateY(0vh);
    }
}
.close-button {
    background: transparent;
    border: none;
    padding: 1em;
    font-size: 1em;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

JS


        document.getElementById("close-button").onclick = () => {
    document.getElementById("banner").style.display = "none";
}