[CSS] 라인 스크롤 키프레임 애니메이션

다양한 스크롤 애니메이션이 많지만 라인으로 심플하게 표현이 가능한 CSS 키프레임 애니메이션입니다.

---

1. HTML

<div class="scroller"></div>

2. CSS

.scroller {
    width: 1px;
    background: rgba(255, 255, 255, 0.04);
    position: absolute;
    height: 188px;
    left: 50%;
    bottom: 20%;
    overflow: hidden;
}
 
.scroller::before {
    content: '';
    position: absolute;
    height: 52px;
    background: #000;
    width: 1px;
    animation: scroller 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
 
@keyframes scroller {
    0% {transform: translateY(-52px)}
    100%  {transform: translateY(188px)}
}

---

일반적인 마우스 스크롤 애니메이션이 아닌 화면상의 UI를 도와주는 라인 스크롤 키프레임 애니메이션 입니다.