如何让我的关键帧动画顺利重新开始？

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>

结束动画可以制作从头到尾平滑跳转的动画。

Answer 1

要解决动画滚动到顶部后第一个项目半可见的问题，您应该对所有项目应用相同的高度并正确垂直居中 h3-tag。为了方便起见，我稍微调整了您的 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);
  }
}