0

Hello I'm trying to make a stock/crypto finance ticker that moves at the top of a react application.

enter image description here

It takes data form an API and generates 100 individual items. This works fine and even works well however when it gets to the end of the css animation it just resets to the beginning of the list and starts over as it should. However I want this animation to keep going in that direction forever because I'll be deleting the beginning items from the ticker container div and appending new updated ones at the end of the ticker. This would work fine if the ticker's animation didn't reset.

So in short I would just like this css animation to keep going no matter what.

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;
}
cosmichero2025
  • 1,029
  • 4
  • 14
  • 37

1 Answers1

1

You should add animation-fill-mode: forwards; to achieve this.

.ticker .ticker-inner {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  animation:ticker linear 1s infinite forwards;
  -webkit-animation:ticker linear 1s infinite forwards;
}
Athul Nath
  • 2,536
  • 1
  • 15
  • 27