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

Question

我正在尝试创建一个 css 动画，我已经破解了一些在全屏上工作但在调整窗口大小时不符合预期的东西。

我正在使用 @keyframe 动画以略微不同的速度移动框和边框，但最终在动画结束时聚集在一起。

这是带有标记的代码笔:https://codepen.io/RichieBrennan/pen/wQrGMJ?editors=1100

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

据我了解，% 是从元素的中心开始的？我很感激有人将我推向正确的方向。

谢谢。

Answer 1

很好的问题。

通常，% 是直接父尺寸的单位，根据您的使用方式取自宽度/高度。例如，假设您有一个 1000px x 500px 容器。如果您的 child 有 left: 50% 或 right: 50%，您将为 child 定位 500px(1000 的一半)测量，从左或右锚定。同样的规则适用于 top: 50% 或 bottom: 50%，除了你现在要处理 250px(500 的一半) .老实说，我从来没有记住或逐步完成任何事情(因此解释很糟糕)，我只是依靠浏览器开发人员工具进行黑客攻击，并且这些知识随之而来。

解决定位问题的方法是将 position: relative 放在父元素上——您的标题。你这样做了，但为了彻底，我将重新解释。

position: absolute 通常允许元素相对于浏览器窗口定位(顶部、左侧、右侧或底部)； 顶部:0px； left: 0px; 将是左上角。将 position: relative 或 absolute 放在父元素上允许所有 position: absolute 子元素相对于其父元素。

在下面的示例中，.some-child 将与任何内容相距 20px，因为所有尺寸都是相对于父级的。

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

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

利用这些知识，您的标题应该是相对的，而您的边框和框都可以是绝对的。但是，您必须确保您的 header 被限制为正确的尺寸，并且您应该使用绝对像素来确定偏移量。这个解释有点失控，所以我只是告诉你我的意思。

* {
  /* helpful for debugging, but use your developer tools */
  outline: 1px solid red;
}

header{
  height: 200px;
  width: 410px;
  position: relative;
  background: lightblue;
}

.border{
  position: absolute;
  width: 10px;
  background-color: yellow;
  /* see comment below
  transform: translate(-0%, -50%);*/
  left: 0;
  top: 0;
  height: 100%; /* height matches parent */
  animation: move-border 1.1s;
}

.box{
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  right: 0;
  /* don't need this! You should try to make
     your animations animate to transform: none,
     which are essentially transform: translate(0, 0).
     Makes it a lot easier to layout things
     and the move-box animation automatically transforms
     back to the original state (if no 100% is defined)
  transform: translate(-50%, -50%);*/
  background-color: white;
  animation: move-box 0.8s;
}

.box h1{
  /* doesn't need to be absolute! but you can play with these numbers,
     they will be relative to .box
  position: absolute;
  left: 25px;
  top: 50px;
  */
  animation: fadein 2s ease-in;
}

@keyframes move-box {
  0% {
   
  left: 35%;
  opacity: 0; 
  }
  100%{
  }
}

@keyframes move-border {
  0%{
  left: 22%;
  opacity: 0; 
  }
  100%{
  opacity: 1;
  }
  
}

@keyframes fadein {
  0% {opacity: 0;}
  100%{opacity: 1;}
}

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

要像以前一样将标题居中，只需将其包装在另一个容器中并在其中执行一些居中逻辑即可。

那里发生了很多事情，我敢肯定你快要无聊死了，但请随时在评论中留下任何问题。我会尽力回答他们。希望对您有所帮助!