stars.css

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: block;
  background-color: #dedcde;
  height: 100%;
  padding: 0;
}

.animationBackground {
  background-color: #2f4e4f;
  width: 50%;
  height: 800px;
  margin: auto;
}


/*Star*/

.starHolder {
  position: relative;
  height: 100%;
  width: 100%;
}

.singleStar {
    width: 0;
    height: 0;
    margin: 50px;
    padding: 0;
    color: #fefaf5;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fefaf5;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg) scale(.3);
    -webkit-transform: rotate(35deg) scale(.3);
    -ms-transform: rotate(35deg) scale(.3);
    -o-transform: rotate(35deg) scale(.3);
}

.singleStar:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fefaf5;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}

.singleStar:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fefaf5;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}


.star1 {
  animation: fadeInDown 5s 1s infinite;
  position: absolute;
  left: 2%;
  top: 4%;
}

.star2 {
  animation: fadeInDown 3s 3s infinite;
  position: absolute;
  left: 20%;
  top: 40%;
}

.star3 {
  animation: fadeInDown 6s 2.4s infinite;
  position: absolute;
  right: -2%;
  top: 16%;
}

.star4 {
  animation: fadeInDown 2s 4s infinite;
  position: absolute;
  right: 25%;
  bottom: 15%;
}

.star5 {
  animation: fadeInDown 6s 2s infinite;
  position: absolute;
  left: 5%;
  bottom: 0%;
}

.star6 {
  animation: fadeInDown 3s 1.3s infinite;
  position: absolute;
  right: 40%;
  bottom: -19%;
}

.star7 {
  animation: fadeInDown 5s 1.5s infinite;
  position: absolute;
  right: 10%;
  bottom: -8%;
}

.star8 {
  animation: fadeInDown 6s -2s infinite;
  position: absolute;
  right: -11%;
  bottom: 34%;
}

.star9 {
  animation: fadeInDown 4s 0.5s infinite;
  position: absolute;
  right: 20%;
  top: 3%;
}

/**********************
Spaceship
***********************/

.shipHolder {
  position: absolute;
  left: 36%;
  top: 55%;
}

.shipTop {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 75px solid #b32123;
  margin-left: 98px;
  margin-bottom: -5px;
}

.shipBody {
  border-top: 100px solid #b32123;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0px;
  width: 250px;
}

.shipLeftLeg {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #ffa400;
  margin-left: 49px;
  padding-top: 21px;
}

.shipRightLeg {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #ffa400;
    padding-top: 21px;
    margin-left: 89px;
}

/**********************
Keyframes
***********************/

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -400%, 0) scale(0.25) skewY(20deg);
  }

  to {
    opacity: 1;
    transform: scale(0.3);
  }