마우스 휠 애니메이션

<a class="scroll_down">
                <span class="scroll">
                    <span class="scroll_dot"></span>
                </span>
            </a>

 

---

 

.scroll_down{position: absolute; bottom: 20px; left: 0; right: 0; margin: 0 auto;}
.scroll_down .scroll{width: 28px; height: 48px; border: 2px solid #fff; border-radius: 25px; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.scroll_down .scroll .scroll_dot{width: 5px; height: 5px; border-radius: 50%; background: #fff; display: block; animation: scroll 1.15s linear infinite;}

@keyframes scroll {
    0%{
        opacity: 0;
        transform: translateY(-1rem);
    }
    100%{
        opacity: 1;
        transform: translateY(1rem);
    }
}