CSS Mouse Scroller

CODEPEN:

CSS Mouse Scroller

Github: https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/Mouse%20Scroller

HTML CODE:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="mouseScroller.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>


    <div id="container">
        <div id="scroll-down">
            <div id="mouse">
                <div id="scroller"></div>
            </div>
        </div>
    </div>

</body>
</html>

CSS CODE:

body{
    background: #262626;
}
#container{
    display:flex;
    align-content:center;
}
#scroll-down{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    margin:auto;
}
#mouse {
    width: 20px;
    height: 100px;
    padding: 150px 100px;
    border: 10px solid #ff6a00;
    border-radius:120px;
}
#scroller{
    width:25px;
    height:50px;
    background:#ff6a00;
    border-radius:20px;
    opacity:0.9;
    animation:ani 1s linear infinite;
    animation-direction:alternate;
}
@keyframes ani{
    0%{
        transform: translateY(0);
    }
    50% {
        transform: translateY(-125px);
    }
    100% {
        opacity: 0;
        transform: translateY(-125px);
    }
}