希望css动画能够在一个方向上永远持续下去

Question

您好我试图制作一个股票/加密融资股票代码，它在一个反应​​应用程序的顶部移动。

它从API获取数据并生成100个单独的项目。这工作正常，甚至可以正常工作，但是当它到达css动画的末尾时，它只是重置到列表的开头并重新开始。但是我希望这个动画永远朝着那个方向前进，因为我将从自动收报器容器div中删除开头的项目，并在自动收报机的末尾添加新的更新的项目。如果自动收报机的动画没有重置，这样可以正常工作。

所以简而言之，我想这个css动画无论如何都要继续前进。

CSS

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker {
  background-color: #131722;
  display: block;
  width: 100%;
  overflow: hidden;
  box-sizing: content-box;
}
.ticker .ticker-inner {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 800s;
  animation-duration: 800s;
}

Answer 1

您应该添加private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { if(jTextField1.getText().equals(""){ jLabel1.setText("Input name cannot be empty"); }else{ jLabel1.setText("My name : " + jTextField1.getText() + ". Selamat datang di java ."); } 来实现此目标。

animation-fill-mode: forwards;