Why is there a difference in css animation when running on the webpack dev server and locally?

Question

css

Example
The most banal, it would seem, animation when loading the page / getting blocks into the viewport.
The block is shifted via transform: translate(-100px), without further action - and remains in this state. as soon as the site loads.
However, on the dev server, the page is loaded first, then the animation of the transform block: translate (-100px);
What's the matter?

Answer 1

The fact is that in the dev environment, the page is first rendered, then, through js, the styles are loaded. Delete the transition, then add another class to js, ​​where the transition will be specified.