javascript - CSS oändlig scrollande div

Hej, jag försöker få div att rulla med en enkel CSS-animation.

Problemet är att det inte loopar bra, eftersom det blir en liten blixt innan det börjar scrolla igen.

HÄR ÄR KODEN: 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;
	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 {
	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>

Vad måste jag göra för att få detta att bli smidigt när det loopar?

tack

Svar #1

Hmmm, en klurig en och kommer behöva några hårdkodade värden om du vill att det ska vara ren CSS, men här är kärnan i det:

.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;
	top:0;
  	animation: scroll 10s linear 1s infinite;
}
span {
  min-width:290px;
  min-height:40px;
  display:block;
  color:white;
  margin:5px;
  background:blue;
}
@keyframes scroll {
	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>

Jag skulle också föreslå att flytta ssss-texten utanför scrollern så att den övre marginalen på 20px som du började med inte stör scrollern

Svar #2

Om du vill att det ska scrolla smidigt till toppen när animationen är klar, är en sak du kan göra att bara modifiera din animation lite, så att den istället för att sluta längst ner, slutar längst upp (det är det ursprungliga tillståndet så det kommer inte att bli något "hopp" när animationen startar om).

Du kan göra detta genom att:

• Scrollar till botten med 95% av animationstiden.
• Använder de återstående 5% för att scrolla upp.

Kodändringarna skulle vara väldigt enkla, och det skulle inte kräva någon JavaScript:

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

Denna demo visar resultatet:

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