infinite-marquee/assets/css/infinite-marquee.css

Configurable package to create an infinite marquee effect. Animated with JS or CSS.

.marquee {
  overflow: hidden;
  display: flex;
  width: 100%;
}

.marquee.marquee-left .marquee-inner {
  -webkit-animation: marquee-left 5s linear infinite;
          animation: marquee-left 5s linear infinite;
}

.marquee.marquee-right .marquee-inner {
  -webkit-animation: marquee-right 5s linear infinite;
          animation: marquee-right 5s linear infinite;
}

.marquee-inner {
  flex-shrink: 0;
  display: flex;
  align-items: center;

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;
  will-change: transform;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
}

@-webkit-keyframes marquee-left {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes marquee-left {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes marquee-right {
  0% {
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    transform: translate3d(0%, 0, 0);
  }
}

@keyframes marquee-right {
  0% {
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    transform: translate3d(0%, 0, 0);
  }
}