javascript - CSS sonsuz kaydırma divi

Merhaba, div'in basit bir CSS animasyonu ile kaymasını sağlamaya çalışıyorum.

Sorun, iyi bir şekilde döngü yapmaması, çünkü kaydırmanın yeniden başlamasından önce küçük bir flaş olması.

İŞTE KOD: 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>

Bunu döngüye alırken pürüzsüz yapmak için ne yapmam gerekiyor?

teşekkür ederim

Cevap #1

Hmmm, zor bir konu ve saf CSS olmasını istiyorsanız birkaç sabit değer gerekecek ama işin özeti şuna benziyor:

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

Ayrıca, başladığınız üst 20px marjın kaydırıcıyla çakışmaması için ssss metnini kaydırıcı dışında taşımayı öneririm

Cevap #2

Animasyon tamamlandıktan sonra bunun üstün doğru sorunsuz bir şekilde kaymasını istiyorsanız, yapabileceğiniz bir şey animasyonunuzu biraz değiştirmek olabilir, böylece animasyon alt kısımda bitmek yerine üstte biter (bu, orijinal durumdur, böylece animasyon yeniden başladığında herhangi bir "sıçrama" olmaz).

Bunu şu şekilde yapabilirsiniz:

• Animasyon süresinin %95'ini kullanarak aşağıya kaydırma.
• Yukarı kaydırmak için kalan %5'i kullanmak.

Kod değişiklikleri gerçekten basit olurdu ve herhangi bir JavaScript gerektirmezdi:

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

Bu demo sonucu gösteriyor:

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