<div class="content">
<div><img class="img" src="https://github-atom-io-herokuapp-com.freetls.fastly.net/assets/index-portal-red-2f7737b286dff1537adff47b8201aa43e33cbe1e47bd528ca2189809917fe132.svg"></div>
<div><img class="img" src="https://github-atom-io-herokuapp-com.freetls.fastly.net/assets/index-portal-orange-semi-d9d13d5529ae8f3c91dc80b182cf14fc629118bbdac8851b36e102dd15652557.svg"></div>
<div><img class="img" src="https://github-atom-io-herokuapp-com.freetls.fastly.net/assets/index-portal-orange-235189ed438049f084ca873f6ed2055c4127ddef84a55fa464053f34c10157e6.svg"></div>
<div><img class="img" src="https://github-atom-io-herokuapp-com.freetls.fastly.net/assets/index-portal-yellow-semi-af7a94ccf4768a81e6692d808f00e33ac88d9110f842d02c5ab211577686301a.svg"></div>
<div><img class="img" src="https://github-atom-io-herokuapp-com.freetls.fastly.net/assets/index-portal-yellow-bf8ec5927e343b3a804448d37a799c9c346af320f30b3cdc019297938fe00300.svg"></div>
<div><img  class="img" src="https://github-atom-io-herokuapp-com.freetls.fastly.net/assets/index-portal-green-semi-6b12059c6aea11bf60e8f3c89afdffb6b817913541a1ce72cbca29f733224984.svg"></div>
<div><img class="img" src="https://github-atom-io-herokuapp-com.freetls.fastly.net/assets/index-portal-green-8a75a5e7cc4f8426a47f5ebfe2459283d3554cfdcf8dc5f492fda0b26d2d6d79.svg"></div>
</div>

<div class="cat"><img class="catPic" src="https://github-atom-io-herokuapp-com.freetls.fastly.net/assets/index-octonaut-8ece2623b8966578e2414c89b7b7190cb56339d1f8b7d260adf62110ce9f39c4.svg"></div>
* {
 box-sizing: border-box;
}
body, html {
 padding: 0;
 margin: 0; 
 background-color: #463e40;
}
.content {
 width: 366px;
 height: 366px; 
 margin: auto; 
 margin-top: 10%;
 position: relative;
 transition: all 3s ease;
 background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Atom_editor_logo.svg/1200px-Atom_editor_logo.svg.png');
 background-repeat: no-repeat;
 background-size: 200px 200px; 
 background-position: center;
 background-radius: 50%;
}
div {
 width: 366px;
 height:366px;
 border-radius: 50%;
 position: absolute;
 margin: 0 auto; 
 display: block;
 animation-name: spin;
 animation-duration: 30s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
}
@keyframes spin {
 from {
 transform:rotate(0deg);
}
 to {
 transform:rotate(360deg);
}
}
.img {
 position: absolute;
 left:0;
 top:0;
 height: 366px;
 width: 366px;
}
div:nth-child(8) {
 animation-duration: 100s;
 padding: 10em;
}
div:nth-child(7) {
 animation-duration: 90s;
}
div:nth-child(6) {
 animation-duration: 80s;
}
div:nth-child(5) { 
animation-duration: 70s;
}
div: nth-child(4) {
 animation-duration: 60s;
}
div:nth-child(3) {
 animation-duration: 50s;
}
div:nth-child(2) {
 animation-duration: 40s;
}
.cat {
 float: left;
 position: absolute;
 top: 100px;
 left: 100px;
 animation-name: cat;
 animation-duration: 30s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}
.catPic {
 animation: mover 1s infinite alternate;
}
@keyframes mover {
 0% {transform: translateY(0);}
 100% {transform: translateY(-15px);}
}
@media screen and (max-width: 600px) {
  .cat {
  top: 100px;
  left: 50px;
  height: 50px;
  width: 50px; 
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.