页面加载时Header从全屏缩至min-content的CSS动画问题

核心问题分析 #

1. min-content 是动态计算值，CSS动画无法直接对其进行平滑过渡
2. 直接动画 height 会触发频繁重排重绘，影响性能
3. Logo需要从视口中央自然过渡到顶部导航栏中央

方案一：简洁实现（max-height动画） #

利用 max-height 支持数值动画的特性，配合CSS变量统一控制Logo尺寸，实现平滑收缩，同时避免硬编码。

CSS代码

:root {
  /* 根据实际Logo尺寸定义变量 */
  --logo-height: 50px;
  --logo-width: 100px;
  --preload-bg: #000;
  --shadow: 0 2px 10px rgba(0,0,0,0.1);
}

body {
  margin: 0; /* 清除默认边距 */
}

header {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 初始全屏 */
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: var(--preload-bg);
  /* 延迟5秒后开始收缩动画，持续2.5秒 */
  animation: headerShrink 2.5s ease 5s forwards;
}

.logo-wrapper {
  margin: 0;
  /* 可选：给Logo添加缩放动画增强视觉效果 */
  animation: logoZoom 2.5s ease 5s forwards;
}

.logo-wrapper img {
  width: var(--logo-width);
  height: var(--logo-height);
  display: block;
}

/* Header收缩动画：用max-height替代height，实现平滑过渡到Logo高度 */
@keyframes headerShrink {
  to {
    max-height: var(--logo-height);
    box-shadow: var(--shadow);
  }
}

/* Logo缩放动画：配合Header收缩，从放大状态回归原尺寸 */
@keyframes logoZoom {
  from {
    transform: scale(1.5);
    opacity: 0.8;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

HTML代码

<body>
 <header>
  <nav></nav>
  <h1 class="logo-wrapper">
    <img src="//picsum.photos/100/50" />
  </h1>
 </header>
</body>

方案优势

• 代码简洁，无需额外DOM元素
• 利用flex布局的居中特性，Logo自动从视口中央过渡到导航栏中央
• max-height 动画比直接动画 height 更高效，配合GPU加速的transform进一步降低性能损耗

方案二：性能最优（无重排实现） #

通过双容器分离预加载层和导航层，完全使用transform和opacity（GPU加速属性）实现动画，彻底避免重排重绘。

CSS代码

:root {
  --logo-height: 50px;
  --logo-width: 100px;
  --preload-bg: #000;
  --shadow: 0 2px 10px rgba(0,0,0,0.1);
}

body {
  margin: 0;
}

/* 预加载层：全屏黑色背景，Logo居中 */
.preload-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--preload-bg);
  z-index: 5;
  animation: preloadExit 2.5s ease 5s forwards;
}

/* 导航Header：初始隐藏，动画后显示在顶部 */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: min-content;
  padding: 0 20px;
  box-shadow: var(--shadow);
  z-index: 4;
  opacity: 0;
  animation: headerEnter 2.5s ease 5s forwards;
}

.logo-wrapper {
  margin: 0;
}

.logo-wrapper img {
  width: var(--logo-width);
  height: var(--logo-height);
  display: block;
}

/* 预加载层淡出并上移，动画结束后不再阻挡交互 */
@keyframes preloadExit {
  to {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
  }
}

/* 导航Header淡入显示 */
@keyframes headerEnter {
  to {
    opacity: 1;
  }
}

HTML代码

<body>
 <div class="preload-container">
  <h1 class="logo-wrapper">
    <img src="//picsum.photos/100/50" />
  </h1>
 </div>
 <header>
  <nav></nav>
  <h1 class="logo-wrapper">
    <img src="//picsum.photos/100/50" />
  </h1>
 </header>
</body>

方案优势

• 完全使用GPU加速属性，无任何布局重排
• 预加载层和导航层分离，逻辑清晰
• 动画结束后预加载层自动失效，不影响页面交互

内容的提问来源于stack exchange，提问作者ned