En el tiempo de precarga, quiero que un logotipo haga una animación en el centro de la ventana gráfica sobre un fondo negro.
Mi idea era cargar el encabezado adhesivo con un ancho del 100% y una altura de 100vh, y luego reducirlo a una altura normal en la parte superior. El encabezado normalmente debe tener una altura de contenido mínimo (según el tamaño del logotipo)
La reducción del encabezado funciona, pero no al contenido mínimo.
He leído que animar la altura no funciona debido a todo el reflujo y el repintado, pero no tengo idea de cómo se supone que debo animar un logotipo desde la ventana central hasta el encabezado central.
header { position: fixed; z-index: 4; top: 0; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; overflow: hidden; box-shadow: var(--shadow); animation: header-minimize-after-preload 2.5s ease 5s forwards; } @keyframes header-minimize-after-preload { 0% { height: 100%; } 100% { height: 10%; /* when using min-content, the header jumps into size instead of animating*/ } } <body> <header> <nav> </nav> <h1 class="logo-wrapper"> <img src="//picsum.photos/100/50" /> </h1> </header> </body>¡¡Gracias por adelantado!!
Hice algunos cambios en su código y espero lograr lo que quería. Envolví la navegación dentro de otro div y está desbordando el encabezado y el encabezado va del 100% a 0 y solo terminará con el contenedor de navegación.
header { position: fixed; z-index: 4; top: 0; background-color:red; height: 100vh; width: 100%; box-shadow: var(--shadow); animation: header-minimize-after-preload 2.5s ease 5s forwards; display:grid; } .navigation-container{ width:100%; height:fit-content; display:flex; justify-content:center; align-items:center; margin: auto; background-color:blue; } @keyframes header-minimize-after-preload { 0% { height: 100%; } 100% { height: 0%; /* when using min-content, the header jumps into size instead of animating*/ } } <body> <header> <div class="navigation-container"> <nav> </nav> <h1 class="logo-wrapper"> <img src="//picsum.photos/100/50" /> </h1> </div> </header> </body>