通过为动画元素的直接父容器设置 overflow: hidden，可强制其子元素的动画进出效果完全限制在该容器可视区域内，解决动画“脱离父盒模型”、从页面全局坐标系出发的问题。

在 css 动画中，当使用 position: relative 配合 left 偏移实现横向滑入/滑出效果时，动画元素的实际渲染位置会超出其父容器边界——但默认情况下，父容器并不会裁剪这些溢出内容，导致动画看起来像是“从整个页面边缘进出”，而非“在自己的盒子内进出”。

要让 .inAnime 元素真正表现为“在 .item1 内部滑动”，关键在于让 .item1 成为动画的裁剪上下文（clipping container）。只需为其添加 overflow: hidden：

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

同时确保动画元素具备定位上下文（你已正确设置 position: relative），这样 left: -30% 和 left: 110% 的百分比值将相对于 .item1 的宽度计算，且超出部分会被自动隐藏。

✅ 补充建议与注意事项：

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

• 不要遗漏 position: relative 在 .inAnime 上——它是 left 属性生效的前提；
• 若 .item1 高度不固定，建议显式设置 height 或 min-height，避免因内容塌陷影响动画视觉稳定性；
• overflow: hidden 也会影响内部其他可能的溢出行为（如阴影、绝对定位子元素），若存在此类需求，可改用 clip-path 实现更精细的裁剪（例如 clip-path: inset(0)）；
• 动画时长（15s）较长，开发调试阶段建议临时缩短至 2s，便于快速验证效果。

最终效果：

Welcome !!!

将从 .item1 左侧边缘平滑滑入，再向右滑出至完全消失于 .item1 右侧边缘——真正实现“盒内动画”，符合语义化布局预期。