<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>

/****My color sites: http://www.rapidtables.com/convert/color/rgb-to-hsl.htm; http://www.computerhope.com/htmcolor.htm;*** For Transform: http://css3.bradshawenterprises.com/transforms/***/ html, body { height: 100%; margin: 0; overflow: hidden; } body { display: flex; align-items: center; justify-content: center; background: transparent; } div { width: 40vmin; height: 40vmin; overflow: hidden; } div > div { width: 100%; border-radius:40%; height: 100%; animation: a 3s linear infinite; background-color: hsla(180,100%,25%, 0.5);;/**Available on more colors: hsla(180,100%,50, 0.5);**/ } @keyframes a { 0% { transform: scale(.5) rotateY(2deg); } 6.25% { transform: scale(.915) rotateY(5.625deg); } 12.5% { transform: scale(.85) rotateY(11.25deg); } 18.75% { transform: scale(.8) rotateY(16.875deg); } 25% { transform: scale(.765) rotateY(22.5deg); } 31.25% { transform: scale(.74) rotateY(28.125deg); } 37.5% { transform: scale(.72) rotateY(33.75deg); } 43.75% { transform: scale(.71) rotateY(39.375deg); } 50% { transform: scale(.708) rotateZ(45deg); } 56.25% { transform: scale(.71) rotateZ(50.625deg); } 62.5% { transform: scale(.72) rotateZ(56.25deg); } 68.75% { transform: scale(.74) rotateZ(61.875deg); } 75% { transform: scale(.765) rotateZ(67.5deg); } 81.25% { transform: scale(.8) rotateZ(73.125deg); } 87.5% { transform: scale(.85) rotateZ(78.75deg); } 93.75% { transform: scale(.915) rotateZ(84.375deg); } 100% { transform: scale(1) rotateZ(90deg); } }