通过为父元素（如 `.item1`）设置 `overflow: hidden`，可限制子元素动画的可见区域，使其严格在父容器边界内进出，避免从页面边缘开始或结束。

在 CSS 动画中，当一个绝对定位（或相对定位 + left/right 偏移）的元素执行横向位移动画时，其运动路径默认基于最近的定位上下文（positioned ancestor）；若无显式定位祖先，则回退至初始包含块（通常是视口）。在你的代码中，.inAnime 使用了 position: relative 和 left 值（-30% → 110%），但 .item1 本身未设置 position 或 overflow，导致动画虽逻辑上“在内部”，视觉上却明显溢出——因为浏览器允许内容自由溢出容器，除非显式约束。

✅ 正确解法：为 .item1 添加 overflow: hidden
该声明会创建一个新的块级格式化上下文（BFC），并裁剪所有超出其边界的子元素内容（包括动画过程中的临时位置）。即使 <h1> 的 left: -30% 将其左边缘推至容器外，它也不会显示在 .item1 左侧之外；同理，left: 110% 时右半部分也会被截断，实现“从左滑入、向右滑出”的盒内动画效果。

? 修改后的关键 CSS 片段如下：

.item1 {
  grid-area: header;
  overflow: hidden; /* ? 核心修复：启用裁剪 */
}

⚠️ 注意事项：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

• overflow: hidden 不影响布局尺寸，但会隐藏溢出内容（包括阴影、伪元素、transform 超出部分等），请确保设计允许此行为；
• 若需保留滚动能力（如调试时查看溢出），可临时用 overflow: auto 辅助验证，但生产环境推荐 hidden；
• 动画性能友好：left 属性触发布局重排（reflow），如追求高性能，建议改用 transform: translateX()（配合 will-change: transform），例如：

  @keyframes slideInOut {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  .inAnime {
    animation: slideInOut 15s linear;
  }

总结：控制动画“可视范围”的本质是控制容器的溢出行为，而非修改动画本身。overflow: hidden 是最直接、语义清晰且兼容性极佳的解决方案，适用于所有需要将动画严格约束在父容器内的场景。

立即学习“前端免费学习笔记（深入）”；