Transition Problem and Solution in CSS

When you apply a transition property to the labels in CSS and refresh the page, these properties are animated while the page is loading, making it look bad on first load.

To solve this problem, one can go like this, add a class called preload to your tag.

<body class="preload">



And in your css file disable transition property of all properties under preload.

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;

Finally, remove this class when the page is ready, whether with jquery or vanillajs.

// jquery example
$(window).load(() => {

// vanillajs example
window.addEventListener('load', (event) => {

There are no comments, make the firs comment