I have a little CSS animation where 3 stars animate into view one by one. The idea being whatever the grade/mark is, the relevant number of stars are displayed. 1 star for pass, 2 for merit and 3 for a distinction.
In this example I’ve got all 3 animating: http://codepen.io/moy/pen/JKrzLy
It works pretty well but I can’t help but think it would be better if the grey star ‘disappeared’ when the yellow version is displayed as it looks a little murky?
Rather than having the 3 grey stars as a background image is it possible to set the 3 (yellow) stars to grey and then when the animation starts switch the position of the sprite to the yellow version? It wouldn’t need to animation fade/slide just instantly change when the animation is triggered?
–
I haven’t actually thought about the best way to trigger the 3 different animations yet. I guess I could just use classes of grade--pass, grade--merit, grade--distinction and animate the stars that needed to be animated based of that? But I guess that could be a lot of duplicated CSS? . Or would it be better to keep it how it currently works and just ‘inject’ the correct number of star divs? So if the grade is a merit, star--3 would not be present in the mark-up?
Thanks in advance, hope you can help. I don’t use animations that’s much :)
