Transition Problem and Solution in CSS

Comments (0)

Views (482)

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">

..

</body>

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(() => {
  $("body").removeClass('preload');
});

// vanillajs example
window.addEventListener('load', (event) => {
  document.body.classList.remove('preload');
});

When you are stuck while you are coding or when you need to relax yourself comment section is waiting for you. Ask what you don't know, answer what you know !