What is the late rendering of the Browser related to?

Question

css

Set initial style

padding: 15px 10px 15px 40px;
    background: url(/storage/media/img/trash.png) 10px 17px no-repeat;
    transition: all 1.0s ease;
    cursor: pointer;

But when rendering, the browser assigns the same padding following the Transition animation rule. That is, when the page is initially loaded, the padding for the browser is zero and gradually transforms to padding: 15px 10px 15px 40px;
I know that it's a matter of transishing, but this problem only started when the server (OpenServer) was restarted. Initially, everything worked fine. The padding was set immediately and not gradually, what could be the problem?
Styles are loaded at the end of parsing, maybe this is the problem?
Original

Answer 1

he had asked that before. you just didn't notice it. apparently the page was loading longer and it was not shown how the padding is set.
in general, if the transition is not there for padding, then change all to what you need.

Answer 2

This is because the page starts rendering before the style sheet is loaded. you can try splitting the record like

element {какие-то стили}
element {transition: 1s}