Single Transparent Image Marquee Across Viewport?

Question

Knowing full well that it's deprecated, I fooled around with the MARQUEE tag and got the exact result I was looking for: a single transparent png image of a ship travelling at a steady speed across the viewport on an infinite loop. This was beautiful as it was so simple and gave me the required result with very little code and without any headaches whatsoever! As we all know (or quickly find out!), sadly the MARQUEE tag is not advisable on a working website.

However, what I don't know and now need to know is how to replicate the same thing without using those MARQUEE tags? Can it be done solely with HTML & CSS? I have searched online and find many differing and confusing answers.

Can anyone fulfill this challenge?

Answer 1

You can use an infinite CSS animation.

To move from right to left first position the ship just off the viewport to the right, this can be done by translating it 100vw.

Then to move it over to the left translate it by -100%. 100% in a translateX is 100% of the element's own width so the ship disappears off to the left.

.ship {
  width: 30px;
  height: 20px;
  background: blue;
  animation: move 10s linear infinite forwards;
  position: fixed;
  top: 0;
  left: 0;
}

@keyframes move {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div class="ship"></div>