<div class="scroll"> <span class="text">Scroll</span> </div>

.scroll { padding-top: 70px; position: relative; text-align:center; } .scroll::before { animation: scroll 3.5s infinite; display: inline-block; content: ""; position: absolute; width: 1px; height: 40px; top: 0; right: 0; left: 0; margin: auto; background:#000; } @keyframes scroll { 0% { transform:translateY(0px); opacity: 0; } 40% { opacity: 1; } 80% { transform:translateY(30px); opacity: 0; } 100% { opacity: 0; } }