Responsive Text Scrolling Effect – Pure CSS Marquee

Preview:

Description:

The Pure CSS Marquee uses CSS3 transforms and container queries to create a responsive and elegant scrolling effect for text that exceeds the width of its container. Supports for scrolling in both left and right directions.

How to use it:

1. Add your text to the marquee container.

<div class="marquee">
  <span>The Pure CSS Marquee uses CSS3 transforms and container queries to create a responsive and elegant scrolling effect for text that exceeds the width of its container.<span>
</div>

2. The CSS styles for the marquee container.

.marquee {
  display: flex;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 300px;
  padding: 20px 10px;
  margin: 20px auto;
  background-color: salmon;
  resize: horizontal;
  container-type: inline-size;
}

3. Apply a marquee style scrolling animation to the text.

.marquee > * {
  -webkit-animation: marquee 10s linear infinite both alternate;
  animation: marquee 10s linear infinite both alternate;
}
@-webkit-keyframes marquee {
  to {
    transform: translateX(min(100cqw - 100%, 0px));
  }
}
@keyframes marquee {
  to {
    transform: translateX(min(100cqw - 100%, 0px));
  }
}