Reactjs - Set Transition In Inline Css

Codesandbox for reference: https://codesandbox.io/s/busy-leaf-onnqq I want to make the blinky lights in the animation scale up and down, so they look more stretchy and less blinky

Solution 1:

Actually, scaling is working fine. But, the problem is that its content is moving out to the left side of the screen. Just try adding text-align: center to those divs and you will be able to see it.

Scaling doesn't care about not going to the left of the window. Not sure what is your purpose of using scale here, but I would try to avoid it because it also has font rendering issues on some devices and browsers.

Instead, I would use CSS calcfor the font-size and do something like calc(x * 1em), where x can be dynamic value.