Как сделать бесконечную вертикальную бегущую строку

Подскажите пожалуйста, как сделать зацикленную вертикальную строку. Разметка:

<div class="whats-playing__text">
    <p class="whats-playing__how whats-playing__how_purp">КАК ИГРАТЬ?</p>
    <p class="whats-playing__how whats-playing__how_purp-bord">КАК ИГРАТЬ?</p>
    <p class="whats-playing__how whats-playing__how_green">КАК ИГРАТЬ?</p>
    <p class="whats-playing__how whats-playing__how_black">КАК ИГРАТЬ?</p>
    <p class="whats-playing__how whats-playing__how_purp">КАК ИГРАТЬ?</p>
    <p class="whats-playing__how whats-playing__how_purp-bord">КАК ИГРАТЬ?</p>
    <p class="whats-playing__how whats-playing__how_green">КАК ИГРАТЬ?</p>
    <p class="whats-playing__how whats-playing__how_black">КАК ИГРАТЬ?</p>
</div> 

Важно чтобы контейнер "whats-playing__text" оставался абсолютным. Пробовал делать так, но анимация обрывается на пол пути. Также важно, чтобы при достижении строкой конца блока, она возвращалась сверху.

@keyframes matrix {
0% {
    transform: translatey(-50%);
 }
100% {
    transform: translatey(0%);
 }
}

.whats-playing__text{
    animation: matrix 4s linear infinite;
}