Help with CSS transitions


I made this pie timer which will eventually go into my pomodoro timer project, albeit much more polished than this. However, I’ve encountered two problems that I’m stuck on. The animation responds to clicking anywhere in the window.

  1. When I click for a second time in order to stop the animation, the boxes do some strange spinning that I can’t explain. I’m guessing they are responding to the transition again to reset, but I would expect them to just reverse the animation as opposed to what they actually do. Why do they do this and how can I stop this?

  2. I want the animation to instantly reset to its initial state when I click anytime after starting it.

I can’t seem to figure these out, any help would be appreciated.