Бесконечный цикл вращающейся анимации CSS ⇐ Html

[Anonymous]

Вопрос
Я пытаюсь создать анимацию вертикально вращающегося заголовка в CSS для сайта WordPress.
Мне нужен следующий эффект:

• Заголовок виден и на мгновение останавливается
• Затем он плавно скользит вверх
• Появляется следующий заголовок и снова останавливается
• Это повторяется в бесконечном цикле
  
  По сути, это вертикальный ротатор в стиле игрового автомата:

Код: Выделить всё

Headline 1 (pause)
slide up
Headline 2 (pause)
slide up
Headline 3 (pause)
slide up
Headline 4 (pause)
slide up
Headline 1 ...

Важным моментом является то, что анимация не должна воспроизводиться назад или переходить назад через все этапы при перезапуске.

Текущая реализация
Визуально это работает для 4 заголовков, но в конце анимация сбрасывается на переводY(0), что вызывает видимый эффект перехода/обратного хода вместо плавного продолжения.

Код: Выделить всё

.headline-rotator {
display:inline-block;
overflow:hidden;
height:1.8em;
vertical-align:bottom;
}

.headline-rotator span{
display:block;
animation: rotateHeadlines 12s infinite;
}

@keyframes rotateHeadlines {
0% {transform: translateY(0);}
20% {transform: translateY(0);}
25% {transform: translateY(-100%);}
45% {transform: translateY(-100%);}
50% {transform: translateY(-200%);}
70% {transform: translateY(-200%);}
75% {transform: translateY(-300%);}
95% {transform: translateY(-300%);}
100% {transform: translateY(0);}
}

HTML:

Код: Выделить всё

Headline 1
Headline 2
Headline 3
Headline 4

Чего я хочу достичь

• Вертикально вращающиеся заголовки
• Пауза на каждом заголовке
• Плавный переход к следующему заголовку
• Бесконечный цикл
• Нет видимого перехода или обратная анимация в конце
• В идеале работает с любым количеством заголовков (не только с 4)

Вопрос
Как лучше всего реализовать бесшовный вертикальный вращатель заголовков с остановкой и движением в CSS и HTML без использования JavaScript, который зацикливается бесконечно без возврата анимации назад в начало?


Подробнее здесь: https://stackoverflow.com/questions/799 ... dless-loop