Trying to create a falling star using CSS animation. I made a star with a pseudo element, but I'm having trouble setting 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;
}
Check out the fiddle above where the star is falling from the "after pseudo element," but I want both the main "i" and the after pseudo element to create a falling star.
Any suggestions would be appreciated. Thank you!