I’m fairly new to this but so far, for the site I am creating, each time the user clicks a button on one of the nav bars, the background of the page performs one of 4 subtle animations. The animations consist of hand drawn sequences. Right now I have defined each animation using @Keyframes, to change the background image of a div rapidly through the frames. I used jquery to add the right animation when the user clicks the corresponding button. My problem is, although each of the frames are low quality .pngs, there are 33 frames in each animation, which means the frame is changing every 3% of the @keyframes animation. When it is played it is juttery, unless i shrink the browser window, then it becomes more fluid. I was thinking, this could be because I have not yet put all the CSS in an external sheet, and I have over 1000 lines of css.. Do you think it will ever be fluid? Am I using the completely wrong approach? An alternative might be to make the animations into animated .gifs instead and use jquery to set them off/ stop them, but I have heard alot over the years about gifs being annoying and slow loading as well so I’m not sure what is my best option to speed up my animations.
