试图用文本制作divs以提高无限循环

Question

我试图使divs向上移动无限循环，而我在关键框架设置中挣扎。

谁能帮我弄清楚我错了并纠正我的错误，我敢肯定这是如此简单，我只是没有注意到。

非常感谢。

#container {
  color:#999;
  text-transform: uppercase;
  font-size:60px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

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

#flip > div > div {
  color:#fff;
  padding:10px 12px 10px 12px;
  height:65px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {transform: translateY(0);}
  50% {transform: translateY(50%);}
  100% {transform: translateY(100%);}
}

<div id=container>
  ENDLESS 
  <div id=flip>
    <div><div>SMOOTHIES</div></div>
    <div><div>MILKSHAKES</div></div>
    <div><div>FRUIT SHAKES</div></div>
     <div><div>COCTAILS</div></div>
     <div><div>FRUIT SHAKES</div></div>
  </div>
  OPTIONS!
</div>

Answer 1

您正在为完整视图端口进行动画，#flip。

取而代之的是，您可以将所有Divs包装在容器中，＃filp-container，并为其进行动画。

这是完整的编辑代码，对每个更改都有评论：

#container {
  color:#999;
  text-transform: uppercase;
  font-size:60px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

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

#flip-container div {
  color:#fff;
  padding:10px 12px 10px 12px;
  height:65px;
  margin-bottom:45px;
  
  /* this will break the aliging of divs */
  /* display:inline-block; */
}

/* we are targeting the container */
#flip-container {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {transform: translateY(0);}
  
  /* 50% is unnecessay */
  /* 50% {transform: translateY(50%);} */
  
  /* to animate to upward use -100% */
  100% {transform: translateY(-100%);}
}

<div id=container>
  ENDLESS 
  <div id=flip>
    <!-- adding a container around divs and animating it instead of the view port -->
    <div id="flip-container">
      <!-- removed unnecessary surrounding divs -->
      <div>SMOOTHIES</div>
      <div>MILKSHAKES</div>
      <div>FRUIT SHAKES</div>
      <div>COCTAILS</div>
      <div>FRUIT SHAKES</div>
     </div>
  </div>
  OPTIONS!
</div>