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

Question

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

<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;
}

Answer 1

Если я вас правильно понял, то нужно сделать так:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes matrix {
  0% {
    transform: translatey(-100vh);
  }
  100% {
    transform: translatey(calc(100vh + 100%));
  }
}

body {
  overflow: hidden;
}

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

<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>

Объяснение

Я сделал так, чтобы анимация шла с начала страницы до её конца (по вертикали), использовал для этого vh (1vh = 1% от высоты экрана). Я сделал translatey(calc(100vh + 100%)), чтобы также скрылся сам элемент. Также добавил к анимации пропорцию backwards, оно значит то, что при окончании анимации, элемент будет приведён к его стандартному положению (Пример на MDN). <body> я добавил overflow: hidden, чтобы скрыть элементы вышедшие за пределы документа.

Исправление

Вот решение которые вроде бы должно вам подойти:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
}

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

<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>

Если и это вам не подошло, то может тогда такое решение вам подойдёт?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
}

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

<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>

Answer 2

Но ведь есть специальный и любимый всеми тэг...

<marquee direction="down" 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>
</marquee>

БЛОГ НА HUSL

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

Ответы (2 шт):

Объяснение

Исправление