如何使关键帧动画重新​​开始？

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标签垂直居中。为了简化操作，我对您的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值并添加更多关键帧。

注意：所提供的代码并非十分流畅-尝试调整百分比和translationY值，直到动画满足您的需求为止。

@-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);
  }
}