Quiero evitar la transición de CSS en la carga de la página y obtuve mi propia solución.

Porque la respuesta aquí no funciona para mí Evita quela transición CSS se active al cargar la página

Sin embargo, yo mismo no entiendo mi propia solución, aunque funciona...

Mi solución es agregar una clase de precarga con transition: none!important; al cuerpo, luego elimine esta clase cuando la página esté completamente cargada.

Lo que no entiendo es que este script está antes del pie de página, supongo que cuando el navegador llega a esta línea, la transición CSS ya está cargada porque puse el archivo CSS en la etiqueta del encabezado.

Pero, ¿por qué este código todavía funciona?

 const body = document.querySelector('body'); body.classList.add('preload'); window.addEventListener('load', function() { body.classList.remove('preload'); });