Customizing CSS Animations

This is a companion discussion topic for the original entry at https://www.kirupa.com/animations/customizing_css_animations.htm

A TL;DR:

I was hoping that this trick would allow me to have a random circle moving around the screen, fully powered by a CSS animation only. As it turns out, that is possible…albeit with some major quirks.

Here is an example:

This only works in Chrome stable (as of now). It doesn’t work in Chrome Canary, Firefox, or Safari. In the keyframes, do not remove the background-color declaration. For some reason, it needs to be there to get the circle to move. No idea why :man_shrugging:

And…the video for it is up as well:

1 Like