html - 如何让我的关键帧动画顺利开始？

Question

我用关键帧制作的动画没有一个平滑的结束，并且跳到开始的速度非常快。我不知道如何让这个过渡更顺畅。

当动画结束并跳回开始时，第一个元素并不完全可见。

body {
  font-family: 'Poppins', sans-serif;
}

ul {
  list-style: none;
}

#flip {
  height: 43px;
  margin-top: -20px;
  overflow: hidden;
}

#flip .content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#flip h3 {
  font-weight: 400;
  font-size: 0.5em;
  color: white;
  text-transform: uppercase;
  text-align: right;
  display: inline-block;
  padding: 5px;
  margin-bottom: 10px;
  animation: flip 4s infinite;
  animation-delay: 1s;
}

#flip .one {
  background: #CD1517;
}

#flip .two {
  background: #068587;
}

#flip .three {
  background: #F2B134;
}

#flip .four {
  background: #6B50BF;
}

#flip .five {
  background: #4FB99F;
}

@-webkit-keyframes flip {
  0% {
      transform: translateY(0px);
  }
  20% {
      transform: translateY(-43px);
  }
  40% {
      transform: translateY(-90px);
  }
  60% {
      transform: translateY(-135px);
  }
  80% {
      transform: translateY(-180px);
  }
  100% {
      transform: translateY(0px);
  }
}

<ul>
  <li id="flip">
   <div class="content">
	<h3 class="one">developer</h3>
	<h3 class="two">designer</h3>
	<h3 class="three">programmer</h3>
	<h3 class="four">carodej</h3>
	<h3 class="five">alluneed</h3>
   </div>
  </li>
</ul>

Animation on end 可以制作从头到头平滑跳转的动画。

Answer 1

要解决动画滚动到顶部后第一个元素半可见的问题，您应该对所有元素应用相同的高度，并正确地将 h3 标签垂直居中。为了简化操作，我稍微调整了您的 html。

要使动画流畅，您需要更改关键帧。首先使用元素高度的倍数作为 translateY。然后你必须改变百分比。通过让过渡从动画持续时间的 10% 开始，您的第一个元素将在动画重新开始后显示更长的时间。

body {
  font-family: 'Poppins', sans-serif;
}

ul {
  list-style: none;
}

#flip {
  height: 43px;
  overflow: hidden;
}

#flip .content {
  height: 43px; /* new */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* new */
}

#flip h3 {
  font-weight: 400;
  font-size: 0.5em;
  color: white;
  text-transform: uppercase;
  padding: 5px;
  animation: flip 6s infinite; /* changed */
  animation-delay: 1s;
}

#flip .one {
  background: #CD1517;
}

#flip .two {
  background: #068587;
}

#flip .three {
  background: #F2B134;
}

#flip .four {
  background: #6B50BF;
}

#flip .five {
  background: #4FB99F;
}


/* changed */
@-webkit-keyframes flip {
  10%, 100% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-43px);
  }
  40% {
    transform: translateY(-86px);
  }
  55% {
    transform: translateY(-129px);
  }
  75% {
    transform: translateY(-172px);
  }
}

<ul id="flip">
  <li class="content">
    <h3 class="one">developer</h3>
  </li>
  <li class="content">
    <h3 class="two">designer</h3>
  </li>
  <li class="content">
    <h3 class="three">programmer</h3>
  </li>
  <li class="content">
    <h3 class="four">carodej</h3>
  </li>
  <li class="content">
    <h3 class="five">alluneed</h3>
  </li>
</ul>

编辑:没有滚动到顶部效果的动画

为了有一个无缝的旋转效果，你需要进一步调整translateY值并添加更多的关键帧。

注意:提供的代码并不十分流畅 - 尝试调整百分比和 translateY 值，直到动画满足您的需要。

@-webkit-keyframes flip {
  0% {
    transform: translateY(15px);
  }
  10% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(-43px);
  }
  50% {
    transform: translateY(-86px);
  }
  70% {
    transform: translateY(-129px);
  }
  90% {
    transform: translateY(-172px);
  }
  100% {
    transform: translateY(-202px);
  }
}