.zoom-in-out-box {
 animation: zoom-in-zoom-out 7s ease infinite;
 margin: 14px;
  /* width: 60px;
  height: 60px;
 background: #f50057;
 
 
  opacity: 0.8;
rotate:30deg;
/*border-radius:5px;*/
 
}
 #moon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 15px 15px 0 0 #f50057;
    }

#moon2 {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 15px 15px 0 0 #00ffff;
    }
#moon3 {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 15px 15px 0 0 #ffff00;
    }



.zoom-in-out-box2 {
  margin: 4px;
  /* width: 60px;
  height: 60px; */
  /*background: #00ffff /*#00ff00*/;
  animation: zoom-in-zoom-out2 7s ease infinite;
  opacity: 0.75;
rotate:-8deg;
/*border-radius:5px;*/
 
    
}.zoom-in-out-box3 {
  margin: 14px 0 0 -4px;
  /*width: 60px;
  height: 60px;*/
  /*background: #ffff00;*/
  animation: zoom-in-zoom-out3 8s ease infinite;
  position: relative;
  left: 60px;
bottom:90px;
  opacity: 0.6;
rotate:12deg;
/*border-radius:5px;*/


}

.mymove {animation: mymove 500s infinite; position:fixed;}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
}
  50% {
    transform: scale(1.7, 1.7);

  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes zoom-in-zoom-out2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes zoom-in-zoom-out3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes mymove {
0%{transform: rotate(0);}  
  50% {transform: rotate(0.5turn);}
100%{transform: rotate(1turn);}
}