<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="down"></div> </div> </div>

.down{ width:40px; height:70px; border:4px solid #000000; border-radius:19px; position:relative; } .down:before{ content:''; position:absolute; width:5px; height:5px; background:#000000; left:50%; top:5px; transform:translate(-50%, 0); border-radius:50%; transition:all 2s ease; animation:animation 2s linear infinite; } @keyframes animation{ 0%{ top:5px; } 50%{ top:50%; } 100%{ top:95%; } }