Question

您好我正在尝试使用简单的CSS动画制作div。

问题是它没有好循环，因为在重新开始滚动之前有一点闪光。

这是代码： https://jsfiddle.net/by6tx4o0/2/

＆＃13;

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

＆＃13;

def _popen( command_list ):
    p = subprocess.Popen( command_list, stdout=subprocess.PIPE,
        stderr=subprocess.PIPE )

    out, error_msg = p.communicate()

    # Some processes (e.g. system_start) print a number of dots in stderr
    # even when no error occurs.
    if error_msg.strip('.') == '':
        error_msg = ''

    return out, error_msg

＆＃13;

循环时我需要做些什么才能顺利完成？

谢谢

Answer 1

如果你想让它在动画完成后顺利滚动到顶部，你可以做的一件事就是修改你的动画，所以不要在底部完成，而是在顶部完成（那是原始状态，因此在动画重新启动时不会有任何“跳转”）。

您可以通过以下方式执行此操作：

使用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>

Answer 2

嗯，这是一个棘手的问题，如果你想让它成为纯粹的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;
	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>

此外，我会将ssss文本移到滚动条之外，以便您开始使用的前20px边距不会干扰滚动条

CSS无限滚动div

2 个答案: