调整窗口大小时的CSS关键帧动画

我正在尝试创建一个css动画，我已经拼凑了一些东西，可以在全屏上工作，但在调整窗口大小时并没有达到预期效果

我使用@keyframe动画以稍微不同的速度移动长方体和边框，但最终在动画结束时移动到一起

以下是带有标记的代码笔：

这是一些文本

据我所知，%是从元素的中心开始的？我希望有人能给我指点方向

谢谢。

好问题

通常，

%

是直接父维度的单位，根据使用方式从宽度/高度中提取。例如，假设您有一个

1000px x 500px

容器。如果您的孩子有

左：50%

或

右：50%

，您将使用

500px（1000的一半）测量值定位孩子，从左或右定位。同样的规则也适用于
top:50%
或
bottom:50%
，除非您现在处理的是
250px
（500的一半）。老实说，我从来没有记忆过或经历过任何事情（因此解释得很糟糕），我只是依靠浏览器开发工具进行黑客攻击，这些知识也随之而来

解决定位问题的方法是将
position:relative
放置在父元素（标题）上。你这么做了，但我要重新解释，只是为了彻底

position:absolute
通常允许元素相对于浏览器窗口进行定位（顶部、左侧、右侧或底部）<代码>顶部：0px；左：0px将位于左上角。将
position:relative
或
absolute
放置在父元素上，允许所有
position:absolute
子元素相对于其父元素相对

在下面的示例中，
。由于所有维度都是相对于父维度的，因此一些子维度将与任何对象相距
20px

.some-parent {
     margin: 20px;
     position: relative;
}

.some-child {
     position: absolute;
     top: 0;
     left: 0;
}

利用这些知识，标题应该是相对的，边框和方框都可以是绝对的。但是，您必须确保您的
标题
被约束到正确的尺寸，并且您应该使用绝对像素来确定偏移。这个解释已经有点失控了，所以我会告诉你我的意思


*{
/*有助于调试，但请使用开发人员工具*/
轮廓：1px纯红；
}
标题{
高度：200px；
宽度：410像素；
位置：相对位置；
背景：浅蓝色；
}
.边界{
位置：绝对位置；
宽度：10px；
背景颜色：黄色；
/*见下面的评论
转换：转换（-0%，-50%）*/
左：0；
排名：0；
高度：100%；/*高度与父级匹配*/
动画：移动边框1.1s；
}
.盒子{
位置：绝对位置；
左：10px；
排名：0；
身高：100%；
右：0；
/*不需要这个！你应该试着
要变换的动画：无，
本质上是transform:translate（0，0）。
使布局变得更容易
移动框动画会自动变换
返回原始状态（如果未定义100%）
转换：翻译（-50%，-50%）*/
背景色：白色；
动画：移动框0.8s；
}
.框h1{
/*不需要绝对！但你可以玩这些数字，
它们将与.box相对
位置：绝对位置；
左：25px；
顶部：50px；
*/
动画：Fadein2s轻松进入；
}
@关键帧移动框{
0% {
左：35%；
不透明度：0；
}
100%{
}
}
@关键帧移动边界{
0%{
左：22%；
不透明度：0；
}
100%{
不透明度：1；
}
}
@关键帧淡入淡出{
0%{不透明度：0；}
100%{不透明度：1；}
}

这是一些文本
这是因为
.border
元素被定位到跨越整个
正文的
标题
元素，而不是
.box
元素，因此%的定位与
.box
宽度不匹配

<header>
    <div class="box">
        <div class="border"></div>
        <h1>This is some text</h1>
    </div>
</header>

您需要
.border
元素位于
.box
元素中，因为
CSS
需要
.box
宽度

<header>
    <div class="box">
        <div class="border"></div>
        <h1>This is some text</h1>
    </div>
</header>

现在重要的是将
@关键帧向左移动边框
更改为负数%（根据您自己的偏好进行调整）

或者，您可能希望使用
：before
伪代码代替更干净的html代码：

HTML

<header>
  <div class="box">
    <h1>This is some text</h1>
  </div>
</header>

退房：
谢谢！现在对我来说这太明显了。谢谢你！谢谢你的详细解释。这让我对这个问题有了更好的理解。另一位评论员也指出，边线的位置是从头球开始的。我感谢你花时间来解释这一点。谢谢@鲍勃很乐意帮忙！欢迎来到SO。
   @keyframes move-border {
      0%{
      left: -29%;
      opacity: 0; 
      }
      100%{
      opacity: 1;
      }
   }

<header>
  <div class="box">
    <h1>This is some text</h1>
  </div>
</header>

.box:before
{
  content: '';
  display: block;
  position: absolute;
  width: 10px;
  height: 200px;
  background-color: yellow;
  transform: translate(-0%, -50%);
  left: -10px;
  top: 50%;
  animation: move-border 1.1s;
}