Trying to make divs with text to move up infinity loop - css

Question

Im trying to make divs move up infinity loop, and i'm struggle with the keyframes settings.
Can anyone help me figure out where I'm wrong and correct my mistake, I'm sure it's something so simple I just did not notice it.
Thank you very much.
#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

You're animating the full view port, #flip.
Instead you can wrap all the divs in a container, #filp-container, and animate it.
Here is the full edited code with a comment for each change:
#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>