100% высокий вертикальный шатер с CSS при фиксированной скорости прокрутки ⇐ CSS

[Anonymous]

мне нужно заменить вертикальный скругатель на эквивалент CSS, по соображениям соответствия. Замена должна быть 100% высокой шатер, прокручивая вертикальную прокрутку с фиксированной скоростью. .io/strongpom/pen/qmooze

Я попытался использовать код, связанный выше, но найти способ удовлетворить следующие три требования:

(1) Мне нужно, чтобы он был на 100% высоком, и для того, чтобы текст прокручивал сверху до нижней части. < /p>

( 2) Я не могу указать длину Div ползунга, потому что это будет определять содержимое (переменная). Это означает, что я не могу установить абсолютные позиции прокрутки, за исключением того, что верхняя часть Div должна начинаться в нижней части просмотра и продолжать прокручивать до тех пор, пока нижняя часть этого Div не достигнет верхней части видового порта. < /P>

и < /p>

(3) Свитрий скорость не может быть зафиксирована при например, 15 секунд, потому что, если есть много контента, оно слишком быстро прокручивается, в то время как если есть мало контента, он слишком медленно прокручивается. Мне нужно иметь возможность указать фиксированную скорость прокрутки, не зависящую от длины. < /P>

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

.container {
width: 20em;
height: 10em;
margin: 2em auto;
overflow: hidden;
background: #ffffff;
position: relative;
}

.slider {
top: 1em;
position: relative;
box-sizing: border-box;
animation: slider 15s linear infinite;
list-style-type: none;
text-align: center;
}

.slider:hover {
animation-play-state: paused;
}

@keyframes slider {
0%   { top:   10em }
100% { top: -14em }
}

.blur .slider {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
}

.blur:before, .blur::before,
.blur:after,  .blur::after {
left: 0;
z-index: 1;
content: '';
position: absolute;
width: 100%;
height: 2em;
background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}

.blur:after, .blur::after {
bottom: 0;
transform: rotate(180deg);
}

.blur:before, .blur::before {
top: 0;
}

p {
font-family: helvetica, arial, sans serif;
}< /code>

[list]
[*] Hello, it's me
[*]
 I was wondering if after all these years you'd like to meet
[*]
To go over everything
[*]
 They say that time's supposed to heal ya
[*]
 But I ain't done much healing
[/list]

Подробнее здесь: https://stackoverflow.com/questions/570 ... roll-speed