CSS Logo Marquee / Ticker

logo-marquee.css

/* Element you wish to animate */
.loop-collection {
  -webkit-animation: logoloop 60s linear infinite;
  -moz-animation: logoloop 60s linear infinite;
  -o-animation: logoloop 60s linear infinite;
}

/* When hover or focus-within on animated elements parent, pause the animation */
.loop-track:hover .loop-collection,
.loop-track:focus-within .loop-collection {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

/* If user has prefers reduced motion on in OS, pause the animation */
@media (prefers-reduced-motion) {
  .loop-collection {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }
}

/* Keyframes of animation to run with prefixing for full browser support */
@-webkit-keyframes logoloop {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@-moz-keyframes logoloop {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@-o-keyframes logoloop {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes logoloop {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}