CODEWITHSUNDEEP
htmlcss
parthiban
parthiban

Reputation: 31

falling star css animation with before/after

I am trying to make fallin star using css animation, so i created star with using pseudo element but i unable to set animation in 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 is falling "after pseudo element" but i need both i & i:after to get falling star

any suggestion would be great, Thanks

Upvotes: 3

Views: 2808

Answers (1)

web-tiki
web-tiki

Reputation: 103810

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

i, i:after

to 

i

DEMO

Explanation :

As the i:after pseudo element is positioned absolutely in the i element, it moves relatively to it so it "follows" it during the animation. Therefore it doesn't need to be animated.

Upvotes: 2

Related Questions