body {
  background-color: black;
}

@-webkit-keyframes astronaut{
  0%{
    transform: rotate(0deg);
  }
 50%{
   transform: rotate(360deg) scale(.5, .5);
  }
  100%{
   transform: rotate(720deg) scale(1, 1);
  }
}

.box-of-star1{
  -webkit-animation: star 5s linear infinite;
}

.box-of-star2{
  -webkit-animation: star 5s -1.64s linear infinite;
}

.box-of-star3{
  -webkit-animation: star 5s -2.30s linear infinite;
}

.box-of-star4{
  -webkit-animation: star 5s -3.30s linear infinite;
}

@-webkit-keyframes star {
  0%{
    opacity: 0;
    transform: translateY(0px);
  }
  20% {
    opacity: 1;
  }
  90%{
    opacity: 1;
    transform: translateY(60vh);
  }
  100%{
    opacity: 0;
    transform: translateY(71vh);
  }
}
    

.star {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: white;
  opacity: .7;
  position: absolute;
  z-index:12;
}

.star-position1{
  top: 30px;
  left: 20px;
}

.star-position2{
  top: 110px;
  left: 250px;
}

.star-position3{
  top: 60px;
  left: 570px;
}

.star-position4{
  top: 120px;
  left: 900px;
}

.star-position5{
  top: 20px;
  left: 1120px;
}

.star-position6{
  top: 90px;
  left: 1280px;
}

.star-position7{
  top: 30px;
  left: 1480px;
} 

.star:before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  top: 40px;
  left: 70px;
  opacity: .7;
}
.star:after{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  top: 8px;
  left: 170px;
  opacity: .9;
} 

.box-of-star1,.box-of-star2,.box-of-star3,.box-of-star4 {
  width: 100%;
  position: absolute;
  left: 0;
  transform: translateY(40vh);
}
  
.astronaut{
  width: 250px;
  height: 300px;
  position:absolute;
  background-image:url("https://th.bing.com/th/id/R.f91f5389f9aebc03240d268a1fea21e5?rik=Ce4VZPcbEHiB4w&pid=ImgRaw&r=0");
  background-size: 100% 100%;
  top: calc(50% - 150px);
  left: calc(50% - 125px);
  z-index:11;
  -webkit-animation: astronaut 5s linear infinite;
}