<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="container"> <div class="row"> <div class="circle"></div> </div> </div>

.circle { width:250px; height:250px; background:#f33; border-radius:50%; position:absolute; top:-250px; right:-125px; animation: corner-move 20s linear 1s infinite; -webkit-animation: corner-move 20s linear 1s infinite; } @keyframes corner-move { 0% { top:-250px; right:-125px;} 25% { top:-160px; right:-125px;} 50% { top:-160px; right:-60px;} 75% { top:-200px; right:-60px;} 100% { top:-250px; right:-125px;} } @-webkit-keyframes corner-move { 0% { top:-250px; right:-125px;} 25% { top:-160px; right:-125px;} 50% { top:-160px; right:-60px;} 75% { top:-200px; right:-60px;} 100% { top:-250px; right:-125px;} }