zarm/es/marquee/style/index.css

基于 React 的移动端UI库

.za-marquee {
  --transform-x: 200%;
  --transform-y: 200%;
  width: 100%;
  overflow: hidden;
}
.za-marquee__body {
  white-space: nowrap;
  width: 100%;
  transform: translate3d(var(--transform-x), var(--transform-y), 0);
  animation-timing-function: linear;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-iteration-count: infinite;
  animation-name: za-marqueue-animation;
}

.za-marquee__content {
  display: inline-block;
}

@keyframes za-marqueue-animation {
  100% {
    transform: translate3d(var(--distance-x), var(--distance-y), 0);
  }
}