即使调整 window 大小时，如何使 div 以关键帧动画为中心

Question

所以我有一个我似乎无法弄清楚的问题。我用同样的问题检查了关于堆栈溢出的 post，但没有答案。

编辑：我的目标是即使在调整 window 大小时也能使 div 居中。基本上，我希望 div 垂直和水平居中。

我的问题是如何在使用关键帧动画时使 div 居中。这是我的代码：

#text-1 {
  animation-name: anim-1;
}

#text-2 {
  animation-name: anim-2;
}

#text-3 {
  animation-name: anim-3;
}

@keyframes anim-1 {
  0%,
  8.3% {
    left: -100%;
    opacity: 0;
  }
  8.3%,
  25% {
    left: 25%;
    opacity: 1;
  }
  33.33%,
  100% {
    left: 110%;
    opacity: 0;
  }
}

@keyframes anim-2 {
  0%,
  33.33% {
    left: -100%;
    opacity: 0;
  }
  41.63%,
  58.29% {
    left: 25%;
    opacity: 1;
  }
  66.66%,
  100% {
    left: 110%;
    opacity: 0;
  }
}

@keyframes anim-3 {
  0%,
  66.66% {
    left: -100%;
    opacity: 0;
  }
  74.96%,
  91.62% {
    left: 25%;
    opacity: 1;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

#text-1 {
 animation-name: anim-1;
}

#text-2 {
 animation-name: anim-2;
}

#text-3 {
 animation-name: anim-3;
}

<div class="text" id="text-1">
  <div class="title">
    <p>LEARN TO CODE</p>
  </div>
</div>
<div class="text" id="text-2">
  <div class="title">
    <p>LEARN TO CODE</p>
  </div>
</div>
<div class="text" id="text-3">
  <div class="title">
    <p>LEARN TO CODE</p>
  </div>
</div>

Answer 1

首先，给你的元素一个width。然后你可以用 50vw 得到一半的屏幕。您需要从屏幕的一半减去元素的一半宽度。为此，您可以使用 calc().

#text-1 {
  position: relative;
  animation: anim-1 5s infinite;
  width: 200px
}

#text-2 {
  position: relative;
  animation: anim-2 5s infinite;
  width: 200px;
}

#text-3 {
  position: relative;
  animation: anim-3 5s infinite;
  width: 200px; 
}

@keyframes anim-1 {
  0%, 8.3% { left: 0; opacity: 0; }
  8.3%,25% { left: calc(50vw - 100px); opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
    0%, 33.33% { left: 0; opacity: 0; }
  41.63%, 58.29% { left: calc(50vw - 100px); opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
    0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: calc(50vw - 100px); opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

<div class="text" id="text-1">
  <div class="title">
     <p>LEARN TO CODE</p>
  </div>
</div>
<div class="text" id="text-2">
  <div class="title">
     <p>LEARN TO CODE</p>
  </div>
</div>
<div class="text" id="text-3">
  <div class="title">
     <p>LEARN TO CODE</p>
  </div>
</div>

Answer 2

如果您想以最简单的方式执行此操作，我建议您使用以父项为中心的 flex，然后将子项设置为 position: absolute。这将使它们始终在页面上垂直和水平居中，并且彼此重叠（这对于避免文本位于不同行很重要）。

要制作动画，我建议使用 transform: translateX();，因为这不会影响其他元素，并且允许您将所有移动都基于元素的初始位置。您还可以使用 animation-delay 来限制您必须制作的动画数量。

这可能需要针对 Chrome 以外的浏览器进行一些调整，但可以为您提供初步想法。

body {
  margin: 0;
  overflow: hidden;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.text {
  animation-name: slide-in-out;
  animation-duration: 3s;
  animation-fill-mode: forwards;

  position: absolute;
  transform: translateX(-100vw);
}

#text-1 {
  animation-delay: 0s;
}

#text-2 {
  animation-delay: 3s;
}

#text-3 {
  animation-delay: 6s;
}

@keyframes slide-in-out {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  25%,
  75% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

<div class="flex-container">
  <div class="text" id="text-1">
    <div class="title">
      <p>LEARN TO CODE</p>
    </div>
  </div>
  <div class="text" id="text-2">
    <div class="title">
      <p>LEARN TO CODE</p>
    </div>
  </div>
  <div class="text" id="text-3">
    <div class="title">
      <p>LEARN TO CODE</p>
    </div>
  </div>
</div>

如果您想让动画无限重复，则必须包含 3 种不同的动画并避免使用 animation-delay。

有点难以解释，但基本上在这种情况下，您必须有时间让文本进入框架、留在框架中和离开框架。动画的每个部分必须占整个动画的相同百分比。

body {
  margin: 0;
  overflow: hidden;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.text {
  animation-duration: 12s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  position: absolute;
  transform: translateX(-100vw);
}

#text-1 {
  animation-name: slide-in-out-1;
}

#text-2 {
  animation-name: slide-in-out-2;
}

#text-3 {
  animation-name: slide-in-out-3;
}

@keyframes slide-in-out-1 {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  10%,
  20% {
    transform: translateX(0);
    opacity: 1;
  }
  30%,
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

@keyframes slide-in-out-2 {
  0%,
  30% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  40%,
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  60%,
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

@keyframes slide-in-out-3 {
  0%,
  60% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  70%,
  80% {
    transform: translateX(0);
    opacity: 1;
  }
  90%,
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

<div class="flex-container">
  <div class="text" id="text-1">
    <div class="title">
      <p>LEARN TO CODE 1</p>
    </div>
  </div>
  <div class="text" id="text-2">
    <div class="title">
      <p>LEARN TO CODE 2</p>
    </div>
  </div>
  <div class="text" id="text-3">
    <div class="title">
      <p>LEARN TO CODE 3</p>
    </div>
  </div>
</div>

即使调整 window 大小时，如何使 div 以关键帧动画为中心

How to make div centered with keyframe animation even when window is resized

html

css

keyframe