Pure CSS Continuous Horizontal Text Scroll Without Break

by

You could try having two marquees and set one of them with a delayed animation of 2.5s which is half the time of the full animation (5s).

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 5s linear infinite;
}

.marquee2 span {
  animation-delay: 2.5s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
<p class="marquee">
  <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span>
</p>
<p class="marquee marquee2">
  <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span>
</p>

More Related Contents:

  1. How to curve the div from bottom with image background
  2. word-wrap break-word does not work in this example
  3. How do I stretch a background image to cover the entire HTML element?
  4. Font Awesome & Unicode
  5. How to make one span both columns in a two column table?
  6. centering a div between one that’s floated right and one that’s floated left
  7. CSS override rules and specificity
  8. What is the difference between phrasing content and flow content?
  9. How to select classes with spaces
  10. How to place Text and an Image next to each other in HTML?
  11. Media queries not working inside an iframe
  12. CSS crop string in the middle
  13. wrap anchor tag around li element
  14. Change image on hover
  15. Rendering a hierarchy of “OPTION”s in a “SELECT” tag
  16. align images side by side in html
  17. bootstrap 4: center inline form inside a jumbotron
  18. How to change style of radio and checkbox input [duplicate]
  19. How can I control the height of an Option element in Webkit?
  20. Removing the Bevel Effect on the Corner of Borders
  21. CSS class starting with number is not getting applied
  22. Dashed border not showing in firefox [duplicate]
  23. How to make input autofocus in internet explorer?
  24. How to set a percentage height value in HTML/CSS
  25. Using sprites with IMG tag?
  26. How to always show the vertical scrollbar in a browser?
  27. Why does a border increase the element’s width?
  28. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?
  29. What does “semantically correct” mean?
  30. Image center align vertically and horizontally [duplicate]

Leave a Comment