CSS Pageload Animation of Header, from fullscreen (100vh/%) to min-content

user_19782289 0
Viewed 46

In the Preload-time I want a Logo to do some animation in the center of the viewport on black background.

My idea was to have the sticky header onload with a width 100% & height 100vh, and then shrink it to a normal height to the top. The header should normally have a height of min-content (depending on the Logo size)

The header shrinking works but not to min-content.

I've read that animating height is a no-go because of all the reflow & repainting, but i have no idea how i'm supposed to animate a logo from center viewport to center header.

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>

Thanks in advance!!

animation css html javascript
1 Answers

i did some changes to your code and i hope achieved what you wanted i wrapped the navigation inside another div and its overflowing the header and header is going from 100% to 0 and you will only end up with the navigation wrapper

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>

user_162753840
Related