hola, probé este fragmento de código que se encuentra en stackoverflowaquí
sin éxito...
Logro usar 'Swup' para las transiciones pero no para la llegada a la página
* { -webkit-transition: all .5s; -webkit-animation-name: myfading; -webkit-animation-duration: .8s; } @-webkit-keyframes myfading { from { opacity: 0; -webkit-transition: opacity; } to { opacity: 1; } }Hola, no deberías agregar un estilo de animación a cada elemento html con el selector *. ¿Por qué no piensa en colocar un contenedor de pantalla completa encima de cada elemento y desvanecer este contenedor con una animación cronometrada? Algo como esto:
.loadContainer { -webkit-animation-name: myfading; -webkit-animation-duration:.5s; animation-delay: 3s; animation-fill-mode: forwards; width:100%; height:100%; position:fixed; left:0; top:0; background:#dadada; display:flex; justify-content:center; align-items:center; } @-webkit-keyframes myfading { from { opacity: 1; } to { opacity: 0; } } <div class="loadContainer"> <span style="font-weight:bold;color:white;">LOADING WEBSITE ...</span> </div> <div class="page-wrapper"> <h1>My Website</h1> <section style="min-height:100vh"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati nesciunt dolor, vero assumenda recusandae accusantium provident et praesentium delectus sit odit suscipit modi sunt hic! </p> </section> </div>La respuesta de @ChrisSchober ya es muy buena. Pero puede dar lugar a problemas en determinadas circunstancias. Imagina que tienes uno o más archivos CSS grandes. Tienen que ser cargados primero. Lo que significa que solo iniciará el efecto cuando se carguen los estilos. Una forma de evitar esto sería ocultar primero el cuerpo hasta que todo esté cargado. Luego puede desvanecerse en el cuerpo con Javascript y así comenzar la animación.