<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container text-center"> <div class="text-center div"> <h1 style="color:#fff">Animation</h1> </div> </div>

body{ margin:0px auto; } .div { width: 300px; height: 300px; background-color: red; position: relative; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 4s; animation-delay: 2s; border-radius:50%; padding:100px; animation-iteration-count: infinite; text-align:center; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% {background-color:red; left:0px; top:0px;transform:rotate(90deg)} 25% {background-color:yellow; left:200px; top:0px;transform:rotate(180deg)} 50% {background-color:blue; left:200px; top:200px;transform:rotate(270deg)} 75% {background-color:green; left:0px; top:200px;transform:rotate(360deg)} 100% {background-color:red; left:0px; top:0px;transform:rotate(360deg)} }