<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="ball-holder"> <div class="ball"></div> </div>

body{ height: 600px; } .ball-holder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ball-holder .ball { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 50px 50px, #ddd, #000); animation: jump 1s ease-out infinite; } @-webkit-keyframes jump { 0% { height: 200px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 50% { height: 200px; -webkit-transform: translate(0, 120px); -moz-transform: translate(0, 120px); -o-transform: translate(0, 120px); -ms-transform: translate(0, 120px); transform: translate(0, 120px); } 55% { height: 180px; -webkit-transform: translate(0, 140px); -moz-transform: translate(0, 140px); -o-transform: translate(0, 140px); -ms-transform: translate(0, 140px); transform: translate(0, 140px); } 65% { height: 200px; -webkit-transform: translate(0, 100px); -moz-transform: translate(0, 100px); -o-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); } 95% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes jump { 0% { height: 200px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 50% { height: 200px; -webkit-transform: translate(0, 120px); -moz-transform: translate(0, 120px); -o-transform: translate(0, 120px); -ms-transform: translate(0, 120px); transform: translate(0, 120px); } 55% { height: 180px; -webkit-transform: translate(0, 140px); -moz-transform: translate(0, 140px); -o-transform: translate(0, 140px); -ms-transform: translate(0, 140px); transform: translate(0, 140px); } 65% { height: 200px; -webkit-transform: translate(0, 100px); -moz-transform: translate(0, 100px); -o-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); } 95% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes jump { 0% { height: 200px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 50% { height: 200px; -webkit-transform: translate(0, 120px); -moz-transform: translate(0, 120px); -o-transform: translate(0, 120px); -ms-transform: translate(0, 120px); transform: translate(0, 120px); } 55% { height: 180px; -webkit-transform: translate(0, 140px); -moz-transform: translate(0, 140px); -o-transform: translate(0, 140px); -ms-transform: translate(0, 140px); transform: translate(0, 140px); } 65% { height: 200px; -webkit-transform: translate(0, 100px); -moz-transform: translate(0, 100px); -o-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); } 95% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes jump { 0% { height: 200px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 50% { height: 200px; -webkit-transform: translate(0, 120px); -moz-transform: translate(0, 120px); -o-transform: translate(0, 120px); -ms-transform: translate(0, 120px); transform: translate(0, 120px); } 55% { height: 180px; -webkit-transform: translate(0, 140px); -moz-transform: translate(0, 140px); -o-transform: translate(0, 140px); -ms-transform: translate(0, 140px); transform: translate(0, 140px); } 65% { height: 200px; -webkit-transform: translate(0, 100px); -moz-transform: translate(0, 100px); -o-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); } 95% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } }