CSS无状态媒体查询？侧边栏动画页面加载触发问题求纯CSS方案

核心思路 #

通过设置负动画延迟让页面加载时动画直接跳转到结束状态，仅在屏幕尺寸变化触发媒体查询时，恢复正常延迟以播放动画。这种方法兼容性好，无需依赖新特性。

具体实现代码 #

首先定义两个动画：

@keyframes reveal-sidebar {
  from {
    width: 0;
    /* 补充你的侧边栏隐藏状态样式，比如padding、opacity等 */
  }
  to {
    width: 250px;
    /* 补充你的侧边栏显示状态样式 */
  }
}

@keyframes hide-sidebar {
  from {
    width: 250px;
    /* 补充你的侧边栏显示状态样式 */
  }
  to {
    width: 0;
    /* 补充你的侧边栏隐藏状态样式 */
  }
}

然后设置侧边栏基础样式与媒体查询规则：

#sidebar {
  /* 基础样式 */
  width: 250px; /* 默认显示状态，与reveal动画的to帧一致 */
  animation-name: reveal-sidebar;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  animation-delay: -0.2s; /* 负延迟等于动画时长，直接跳转到结束状态，加载时无视觉变化 */
}

/* 屏幕宽度小于等于768px时，触发隐藏动画 */
@media screen and (max-width: 768px) { /* 替换为你的目标宽度值 */
  #sidebar {
    animation-name: hide-sidebar;
    animation-delay: 0s; /* 正常播放动画 */
  }
}

/* 屏幕宽度大于768px时，触发显示动画（仅从窄屏切换过来时生效） */
@media screen and (min-width: 769px) { /* 比目标宽度大1px，确保状态切换触发 */
  #sidebar {
    animation-name: reveal-sidebar;
    animation-delay: 0s; /* 正常播放动画 */
  }
}

原理说明 #

• 初始加载时，animation-delay: -0.2s会让动画直接从结束帧开始，用户看不到任何动画效果。
• 当屏幕尺寸变化触发媒体查询时，animation-delay被重置为0s，动画会完整播放一次，实现侧边栏切换时的过渡效果。
• animation-fill-mode: forwards确保动画结束后，侧边栏保持最终状态（显示或隐藏）。

现代浏览器替代方案（使用@starting-style） #

如果你的目标环境是现代浏览器（Chrome 117+、Firefox 118+、Safari 17.4+），可以用更规范的@starting-style定义初始状态，避免加载时动画触发：

@keyframes reveal-sidebar {
  from { width: 0; }
  to { width: 250px; }
}

@keyframes hide-sidebar {
  from { width: 250px; }
  to { width: 0; }
}

#sidebar {
  width: 250px;
  animation: reveal-sidebar 0.2s forwards 1;
}

/* 初始加载时，状态与reveal动画的结束状态一致，动画无变化 */
@starting-style {
  #sidebar {
    width: 250px;
  }
}

@media screen and (max-width: 768px) {
  #sidebar {
    animation: hide-sidebar 0.2s forwards 1;
  }

  /* 窄屏初始加载时，状态与hide动画的结束状态一致 */
  @starting-style {
    #sidebar {
      width: 0;
    }
  }
}

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