# Customizing CSS Animations

**URL:** <https://forum.kirupa.com/t/customizing-css-animations/648619>\
**Category:** programming\
**Created:** [August 19, 2021, 1:41am UTC](https://forum.kirupa.com/t/customizing-css-animations/648619 "2021-08-19T01:41:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 19, 2021, 1:41am UTC](https://forum.kirupa.com/t/customizing-css-animations/648619/1 "2021-08-19T01:41:19Z")

</div>

This is a companion discussion topic for the original entry at [https://www.kirupa.com/animations/customizing\_css\_animations.htm](https://www.kirupa.com/animations/customizing_css_animations.htm)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 19, 2021, 1:44am UTC](https://forum.kirupa.com/t/customizing-css-animations/648619/2 "2021-08-19T01:44:50Z")

</div>



---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 19, 2021, 2:09am UTC](https://forum.kirupa.com/t/customizing-css-animations/648619/3 "2021-08-19T02:09:45Z")

</div>

A TL;DR:  
[https://twitter.com/kirupa/status/1428176871414329346](https://twitter.com/kirupa/status/1428176871414329346)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 23, 2021, 5:04am UTC](https://forum.kirupa.com/t/customizing-css-animations/648619/5 "2021-08-23T05:04:24Z")

</div>

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:  
https://codepen.io/kirupa/embed/preview/mdwbYVp?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=mdwbYVp

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 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 25, 2021, 5:15pm UTC](https://forum.kirupa.com/t/customizing-css-animations/648619/6 "2021-09-25T17:15:11Z")

</div>

And…the video for it is up as well:

[![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/4/7/4720529aea9ec9a38d6df34a957ddd4c8a31dc0f.jpeg "Customizing CSS Animations") ](https://www.youtube.com/watch?v=wr2aviwqxWo)