如何在调整窗口大小的情况下使用关键帧动画制作div中心

Question

所以我有个问题我似乎搞不懂。我用同样的问题在堆栈溢出上查看了一篇文章，但没有得到回答。

编辑:我的目标是使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

如果您想以最简单的方式这样做，我建议使用以父为中心的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>

​

Answer 2

首先，给元素一个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>

​