Чтобы исправить проблему с полувидимым первым элементом после прокрутки анимации вверх, вы должны применить одинаковую высоту ко всем элементам и правильно расположить по центру тег h3. Чтобы сделать это проще, я немного скорректировал ваш html.
Чтобы сгладить анимацию, вам нужно изменить ключевые кадры. Сначала используйте кратность высоты ваших элементов для перевода. Тогда вы должны изменить проценты. Если начать переход с 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);
}
}