Infinite Scroll Animation

Seamless infinite scrolling text animation with smooth looping.

animation
scroll
infinite
text

Preview

Loading preview...

HTML

<div class="infinite-scroll-wrapper">
  <div class="infinite-scroll">
    <div class="infinite-scroll-content" data-text="• Breaking News • Latest Updates • Important Information">
      • Breaking News • Latest Updates • Important Information
    </div>
  </div>
</div>

CSS

.infinite-scroll {
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 600;
  position: relative;
}
.infinite-scroll-content {
  display: inline-block;
  animation: infinite-scroll-move 8s linear infinite;
}
.infinite-scroll-content::after {
  content: attr(data-text);
  margin-left: 50px;
}
@keyframes infinite-scroll-move {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.infinite-scroll-wrapper {
  border-radius: 8px;
  overflow: hidden;
  max-width: 400px;
}

© 2025 AnyCSS. All rights reserved.