<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="mouse-warp" style="background: red;"> <a href="#mouse-here" class="page-scroll"> <div class="mouse"> <div class="scroll"></div> </div> </a> </div> <div id="mouse-here"></div>

.mouse-warp { margin: 40px auto; display: block; width: 28px; opacity: 0.5; } .mouse { width: 28px; height: 50px; border: 2px solid #fff; border-radius: 14px; } .scroll { width: 4px; height: 4px; border-radius: 2px; background: #fff; position: relative; left: 10px; -webkit-animation: scrolls 1.3s ease-out infinite; } @-webkit-keyframes scrolls { 0% { top: 8px; opacity: 0; -webkit-transform: scaleY(1) scaleX(1); } 5% { top: 8px; opacity: 0.8; -webkit-transform: scaleY(1.2) scaleX(1.2); } 10% { top: 8px; opacity: 1; -webkit-transform: scaleY(1.6) scaleX(1.6); } 15% { top: 8px; opacity: 1; -webkit-transform: scaleY(1.2) scaleX(1.2); } 20% { top: 8px; opacity: 1; -webkit-transform: scaleY(1.2) scaleX(1.2); } 30% { top: 15px; opacity: 1; -webkit-transform: scaleY(1.2) scaleX(1.2); } 100% { top: 30px; opacity: 0; -webkit-transform: scaleY(1.2) scaleX(0.8); } }