如何让动画在.item1容器内起止而非超出其范围？

要让“Welcome !!!”在.item1容器内从左侧滑入、右侧滑出，关键是将动画的定位参照改为.item1容器而非页面根元素，具体修改如下：

核心调整点 #

• 给.item1添加position: relative，使其成为子元素的定位上下文；同时设置overflow: hidden，避免文本滑出容器后仍可见。
• 将.inAnime的定位方式改为position: absolute，让它的偏移计算以.item1为参照。
• 调整动画关键帧的left值，让文本从容器左侧外滑入，最终滑至容器右侧外。

修改后的完整代码 #

CSS 代码 #

.inAnime {
  background-color: pink;
  color: red;
  padding: 5px;
  position: absolute;
  z-index: 0;
}

.inAnime {
  animation-name: slide;
  animation-duration: 15s;
  animation-direction: normal;
}

@keyframes slide {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.item1 {
  grid-area: header;
  position: relative;
  overflow: hidden;
}

.item2 {
  grid-area: menu;
}

.item3 {
  grid-area: main;
}

.item4 {
  grid-area: right;
}

.item5 {
  grid-area: footer;
}

.grid-container {
  display: grid;
  grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="animation.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Grid Test</title>
</head>

<body>
  <div class="grid-container">
    <div class="item1">
      <h1 class="inAnime">Welcome !!!</h1>
    </div>
    <div class="item2">Menu</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>
</body>

</html>

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