The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Change background-image during CSS animation

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #243651

    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:

    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 :)


    Maybe I’m missing something basic but I tried to add background-position to the animation percentages/stages but the image animated/slide around instead of instantly changing.

    Should this be achievable?

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.