CSS бесконечная прокрутка div

Question

Привет, я пытаюсь прокрутить div с помощью простой анимации css.

Проблема в том, что она не работает хорошо, потому что перед перезапуском прокрутки есть небольшая вспышка.

ВОТ КОД:https://jsfiddle.net/by6tx4o0/2/

.c{ 
 
    position:relative; 
 
    background:red; 
 
    max-height:200px; 
 
    float:left; 
 
    width:300px; 
 
    height:300px; 
 
    overflow:hidden; 
 
    overflow-y:auto; 
 
} 
 
.card-home{ 
 
    position:absolute; 
 
    margin:20px; 
 
\t top:0; 
 
    \t animation: scroll 10s linear 1s infinite; 
 
} 
 
span { 
 
    min-width:300px; 
 
    min-height:40px; 
 
    display:block; 
 
    color:white; 
 
    margin:5px; 
 
    background:blue; 
 
} 
 
@keyframes scroll { 
 
\t 100% { top: -100%; } 
 
}

<div class="c">sssss 
 
<div class="card-home"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
    <span>6</span> 
 
    <span>7</span> 
 
    <span>8</span> 
 
</div> 
 
</div>

Что я должен сделать, чтобы сделать это гладко, когда цикл?

спасибо

Answer 1

Хммм a хитрый и нужно будет несколько жестко закодированные значения, если вы хотите, чтобы быть чистым CSS, но вот суть его:

.c{ 
 
    position:relative; 
 
    background:red; 
 
    max-height:225px; /*height to show an exact number of spans - in this case span is 45px (40 height plus 5 margin as margins collapse) and we are showing 5 spans to start */ 
 
    float:left; 
 
    width:315px; 
 
    height:225px; 
 
    overflow:hidden; 
 
    overflow-y:auto; 
 
} 
 
.card-home{ 
 
    position:absolute; 
 
\t top:0; 
 
    \t animation: scroll 10s linear 1s infinite; 
 
} 
 
span { 
 
    min-width:290px; 
 
    min-height:40px; 
 
    display:block; 
 
    color:white; 
 
    margin:5px; 
 
    background:blue; 
 
} 
 
@keyframes scroll { 
 
\t 100% { top: -360px; } /* top is the number of spans (in this case 8) multiplied by span height (45px as described above)*/ 
 
}

<div class="c"> 
 
<div class="card-home"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
    <span>6</span> 
 
    <span>7</span> 
 
    <span>8</span> 
 
    <!-- copy the number of spans displayed at the beggining onto the end --> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
</div> 
 
</div>

Также я хотел бы переместить этот ssss текст вне скроллера так что верхняя маржа 20px, с которой вы начали, не мешает скроллеру

Answer 2

Если вы хотите, чтобы он прокрутке плавно к началу, как только анимация завершена, одна вещь, которую вы могли бы сделать, это просто изменить немного вашей анимации, так что вместо отделки в нижней части, он заканчивается наверху (это исходное состояние, поэтому при повторном запуске анимации не будет никакого «прыжка»).

Вы можете сделать это:

• прокрутке на дно, используя 95% времени анимации.
• Использование оставшегося 5% для прокрутки вверх.

изменения кода будет очень просто, и это не требует каких-либо JavaScript:

@keyframes scroll { 
    95% { top: -100%; } 
    100% { top:0; } 
} 

---

Этот пример показывает результат:

.c{ 
 
    position:relative; 
 
    background:red; 
 
    max-height:200px; 
 
    float:left; 
 
    width:300px; 
 
    height:300px; 
 
    overflow:hidden; 
 
    overflow-y:auto; 
 
} 
 
.card-home{ 
 
    position:absolute; 
 
    margin:20px; 
 
    top:0; 
 
    animation: scroll 10s linear 1s infinite; 
 
} 
 
span { 
 
    min-width:300px; 
 
    min-height:40px; 
 
    display:block; 
 
    color:white; 
 
    margin:5px; 
 
    background:blue; 
 
} 
 
@keyframes scroll { 
 
    95% { top: -100%; } 
 
    100% { top:0; } 
 
}

<div class="c">sssss 
 
<div class="card-home"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
    <span>6</span> 
 
    <span>7</span> 
 
    <span>8</span> 
 
</div> 
 
</div>