Shooting star css animation with before / after

I am trying to create an asterisk fallin using a css animation, so I created a star using a pseudo element, but I was unable to set the animation in the pseudo element

 i{
     position: relative;
   width: 0; 
   height: 0; 
   border-left: 12px solid transparent; 
   border-right: 12px solid transparent; 
   border-bottom: 20px solid red;
}
 i:after {
  content:"";
   border-left: 12px solid transparent; 
   border-right: 12px solid transparent; 
   border-top: 20px solid red; 
   position: absolute;
   width: 0; 
   height: 0; 
   margin: 28px 0 0 -12px;
}

      

        
        
        
      

    

http://jsfiddle.net/m7bpp9za/

see the above fiddle which falls "after the pseudo-element", but I need both i and i: after getting the shooting star

any suggestion would be great, Thanks