<section class="scroll-btn"> <span class="mouse"> <span></span> </span> </section>
body{ background-color: #1d1d1d; } .scroll-btn { display: block; position: absolute; text-align: center; top: 20px; left: 20px; opacity: 1; } .scroll-btn .mouse { position: relative; display: block; width: 150px; height: 220px; margin: 0 auto 40px; border: 5px solid #fff; border-radius: 70px; } .scroll-btn .mouse span { position: absolute; display: block; top: 25%; left: 45%; width: 20px; height:20px; margin: -3px 0 0 -3px; background: #fff; border-radius: 50%; -webkit-animation: scroll 2s infinite linear; -moz-animation: scroll 2s infinite linear; animation: scroll 2s infinite linear; } @-webkit-keyframes scroll { 0% { opacity: 1; top: 40%; } 33% { opacity: 1; top: 25%; } 66% { opacity: 0; top: 25%; } 100% { opacity: 0; top: 40%; } } @-moz-keyframes scroll { 0% { opacity: 1; top: 40%; } 33% { opacity: 1; top: 25%; } 66% { opacity: 0; top: 25%; } 100% { opacity: 0; top: 40%; } } @keyframes scroll { 0% { opacity: 1; top: 40%; } 33% { opacity: 1; top: 25%; } 66% { opacity: 0; top: 25%; } 100% { opacity: 0; top: 40%; } }