Альтернативный вариант для ярлыков шатров

Question

В соответствии с маркой link устаревшая.

Какое следующее предложенное решение для прокручиваемого текста. Анимация CSS - это возможное решение. Но как заставить его работать сверху вниз или снизу вверх.

JSFIDDLE

.marquee { 
    width: 450px; 
    margin: 0 auto; 
    overflow: hidden; 
    white-space: nowrap; 
    box-sizing: border-box; 
    animation: marquee 50s linear infinite; 
} 

Answer 1

Вертикальный Marquee с использованием ключевых рамы:

.marquee { 
 
    position: relative; 
 
    animation: marquee 2s linear infinite; 
 
} 
 
@keyframes marquee { 
 
    0% { 
 
     top: 10em 
 
    } 
 
    100% { 
 
     top: -2em 
 
    } 
 
}

<p class="marquee">Marquee</p>