<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"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div>

body{ margin: 0px; padding: 0px; background-color: #000; } ul{ position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); margin: 0px; padding: 0px; display: flex; } ul li{ list-style: none; width: 50px; height: 50px; border-radius: 50%; background-color: #fff; animation: animate 1.6s ease-in-out infinite; margin: 0px; padding: 0; } @keyframes animate{ 0%, 40%, 100% { transform: scale(0.2); } 20% { transform: scale(1); } } ul li:nth-child(1){ animation-delay:-1.4s; background-color: #ffff00; box-shadow: 0 0 50px #ffff00; } ul li:nth-child(2){ animation-delay:-1.2s; background-color: #76ff30; box-shadow: 0 0 50px #76ff30; } ul li:nth-child(3){ animation-delay:-1s; background-color: #f06292; box-shadow: 0 0 50px #f06292; } ul li:nth-child(4){ animation-delay:-0.8s; background-color: #4fc3f7; box-shadow: 0 0 50px #4fc3f7; } ul li:nth-child(5){ animation-delay:-0.6s; background-color: #ba68c8; box-shadow: 0 0 50px #ba68c8; } ul li:nth-child(6){ animation-delay:-0.4s; background-color: #f57c00; box-shadow: 0 0 50px #f57c00; } ul li:nth-child(7){ animation-delay:-0.2s; background-color: #673ab7; box-shadow: 0 0 50px #673ab7; }