How to make an element cross the screen continuously and always visible?

Question

I have a CSS animation of an element that crosses the entire screen, from right to left, continuously infinitely:

#slider{
   position: absolute;
   top: 50px;
   right: 0;
   background: red;
   width: 150px;
   height: 50px;
   animation: anima 3s linear infinite;
}

@keyframes anima{
   from {right: 0}
   to {right: 100%}
}

<div id="slider"></div>

Note that the element, disappearing from the screen on the left (right: 100%), he returns to position right: 0, that is, to the initial right-hand side and so on.

That’s not the effect I’d like. He wanted the element to be crossing the screen continuously, not returning to the initial position, and that when part of it left the screen, this part would already appear on the right side; and also not that it would start to appear again on the right side when it disappears all on the left, as does the nostalgic marquee. That is, the element will always be visible, be it all or part of it.

It would be something like this, as illustrated in the image below as an example:

Is it possible to do this only with CSS? A solution with Javascript would also be valid, but I couldn’t think of a way to get to that result. You may have to clone the element, or use a pseudo-element ::before or ::after... Any idea?

Answer 1

One way to do it is to put as after an equal element on the right by the entire screen size with left: 100vw. So when the element starts to disappear on the left the distance to the right appears in the same proportion as the first one has already disappeared.

Example (I just added #slider::after):

#slider{
   position: fixed;
   top: 50px;
   right: 0;
   background: red;
   width: 150px;
   height: 50px;
   animation: anima 3s linear infinite;
}

#slider::after{
   content:"";
   position:absolute;
   left:100vw;
   background: red;
   width: 150px;
   height: 50px;
}

@keyframes anima{
   from {right: 0}
   to {right: 100%}
}

<div id="slider"></div>

Answer 2

Tb is possible using a linear-gradiente and changing the background-position

#slider{
  position: absolute;
  top: 50px;
  right: 0;
  background: red;
  width: 100%;
  height: 50px;
  animation: anima 3s linear infinite;
  background-image: linear-gradient(to right,red 75px, #fff 75px, #fff calc(100% - 75px), red calc(100% - 75px));
}
@keyframes anima{
  from {background-position-x: 100vw;}
  to {background-position-x: 0vw;}
}

<div id="slider"></div>

---

Option 2

Animating the dashoffset of a line svg

Note that the animation is very fluid, has no locking or "tremidinhas" in the element when it moves around the screen.

svg {
	stroke-dashoffset: 75px;
	animation: nome 3s infinite linear;
}
line {
	stroke:red; 
	stroke-width: 150px;
}
@keyframes nome {
	0% {
		stroke-dashoffset: 0px;
	}
	100% {
		stroke-dashoffset: 100vw;
	}
}

<svg width="100%" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<line stroke-dasharray="150, calc(100vw - 150px)" x1="0" y1="0" x2="100%" y2="0"></line>
</svg>

Answer 3

3°option

Perks: More performatic

Motive: Makes use of Feature transform CSS, does not make reflows for each iteration of the animation.

Note: The browser rendering algorithm (Render Tree, CSSOM) do not need to recalculate the positioning of the element at each animation iteration.

html,
body {
  overflow-x: hidden
}
.carousel {
  display: grid;
  grid-template-columns: repeat(2, .25fr);
  justify-content: space-between;
  transform: translate3d(75%,0,0);
  animation: anima 3s linear infinite
}
.carousel:before,
.carousel:after {
  content: ".";
  display: inherit;
  background: rgba(255,0,0,1)
}
.carousel:after {
  transform: translate3d(100%,0,0)
}
@keyframes anima{
  from{transform: translate3d(75%,0,0)}
  to {transform: translate3d(-25%,0,0)}
}

<aside class="carousel"></aside>

Answer 4

I was looking for a way to make an image move, Thanks to your code I got it, but I changed some things. Follow the code:

CSS

#slider{
    position: absolute;
    scroll-padding-bottom: 50px;
    right: 0;
    background: transparent;
    width: 150px;
    height: 50px;
    animation: anima 20s linear infinite;
 }
 
 @keyframes anima{
    from {right: 0}
    to {right: 100%}
 }

HTML

<img src="img/well.jpg" id="slider" alt="Instalador de painel Solar">