Bounce Element Around Viewport in CSS
Let's say you were gonna bounce an element all around a screen, sorta like an old school screensaver or Pong or something. You'd probably be tracking the X location of the element, increasing or decreasing it in a time loop and — when the element reached the maximum or minimum value — it would reverse direction. Then do that same thing with the Y location and you've got the effect we're after. Simple enough with some JavaScript and math. Here's The Coding Train explaining it clearly: Here's a canvas implementation. It's Pong so it factors in paddles and is slightly more complicated, but the basic math is still there: See the Pen Pong by Joseph Gutierrez ( @DerBaumeister ) on CodePen . But what if we wanted to do this purely in CSS? We could write @keyframes that move the transform or left / top properties... but what values would we use? If we're trying to bounce around the entire screen (viewport), we'd need to know the dimensions o...