My first CSS animation looked like a dying bee

I spent last Saturday coding a simple bouncing ball animation for my portfolio site, but somehow the ball started zigzagging sideways like it was having a seizure. Turns out I accidentally set the keyframe to move left and right at the same time as the bounce. How do you even debug something that makes you laugh so hard you forget what went wrong?

2 comments

2 Comments

janab8221d ago

The dying bee description is perfect, but you've got the wrong mental model for what happened. A side to side movement plus a bounce isn't the ball having a seizure, it's actually two different animations fighting each other. CSS animations stack by default, so your left/right keyframe was playing on top of your up/down bounce keyframe, both running at the same time. The ball was literally trying to follow two different paths at once and the browser was just rendering whatever won the race each frame. The real fix is either combine both movements into one keyframe sequence so it moves in a smooth arc, or use the animation shorthand to control which one runs when. Also check if you accidentally set position: relative on the ball while the animation was using transform, because those two properties don't play nice together and will cause the exact zigzag freakout you described.

perry.karen21d ago

Add to that the fact that position relative and transform use completely different rendering layers in the browser. When you throw both of them at the ball, you're basically telling the graphics card to render the ball in two separate spots at the same time. The card has to pick one each frame and that's where you get that stuttery, seizure-like movement. Combine that with two keyframe animations fighting and you've got a perfect storm of chaos. I'd bet money the ball had position relative on it too, on top of all the other mess.