Clever Geek Handbook

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

+3


source to share


1 answer


You were almost there, you just need to change this line:

i, i:after

to

i


DEMO

Explanation:

Since the pseudo-element is i:after

positioned absolutely in the element i

, it moves relative to it, so it "follows" it during animation. Therefore, it doesn't need to be animated.

+2


source






More articles:


All Articles