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>

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

2 个答案: