I ended Part 1 thinking my next steps was going to finish up the screen saver using Javascript. Ultimately I do believe that will be the best way to achieve what I want, but I decided before I do that to see if I could do more with CSS to improve on what I had. Digging further I came across the CSS Transform property. I suspected that using the translate function would give me a smoother animation since you specify the X and Y axis.

Here is the updated result:

The movement was much cleaner and using vw/vh made it a LOT easier for me to plot it out.

Next time I will be finishing up the project by adding in some randomness to the travel path and making sure the color changes only on contact with the screen edge.