A Pen by Adam Wang.

index.html

<span class="star"></span>
<span class="star pink"></span>
<span class="star blue"></span>
<span class="star yellow"></span>
<!-- Go to Pinkoi http://pinkoi.com 
 and do  Konami ↑↑↓↓←→←→BAAAAAAAAAA to see shooting star rain. -->

Single-Element-Shooting-Stars.markdown

Single Element Shooting Stars

A Pen by Adam Wang on CodePen.

License.

style.css

body {
  background:#363C49;
}
.star {
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#FFF;
  top:100px;
  left:400px;
  position:relative;
  transform-origin:100% 0;
  animation:star-ani 1s infinite ease-out;
  animation-direction: normal;
  opacity:0;
}
.star:after {
  content:'';
  position:absolute;
  top:0px;
  left:4px;
  border:2px solid #F00;
  border-width:2px 150px 2px 150px; 
  border-color:transparent transparent transparent #FFF;
  transform:rotate(-45deg) translate3d(1px, -1px, 0);
  transform-origin:0% 100%;
  animation:shooting-ani 1s infinite  ease-out;
  animation-direction: normal;
}

.pink {
  top:150px;
  left:500px;
  background:#ff5a99;
  animation-delay:1.8s;
}
.pink:after {
  border-color:transparent transparent transparent #ff5a99 ;
  animation-delay:1.8s;
}

.blue {
  top:100px;
  left:450px;
  background:#4dabff ;
  animation-delay:4.5s;
}
.blue:after {
  border-color:transparent transparent transparent #4dabff;
  animation-delay:4.5s;
}

.yellow {
  top:50px;
  left:600px;
  background:#ffcd5c;
  animation-delay:5.8s;
}
.yellow:after {
  border-color:transparent transparent transparent #ffcd5c;
  animation-delay:5.8s;
}

@-webkit-keyframes shooting-ani {
  0% {
    
  }
  50% {
    transform:scale(1) rotate(-45deg) translate(0px, 0px);
  }
  100% {
    transform:scale(0.5) rotate(-45deg) translate(0px, -1px);
  }
}

@-webkit-keyframes star-ani {
  0% {
    opacity:0;
    transform:scale(0) rotate(0) translate3d(0, 0, 0);
  }
  50% {
    opacity:1;
    transform:scale(1) rotate(0) translate3d(-200px, 200px, 0);
  }
  100% {
    opacity:0;
    transform:scale(1) rotate(0) translate3d(-300px, 300px, 0);
  }
}