Moving road background image-CodePudding

.bg
{
  width: 100vw;
  height: 100vh;
}

<div >
  <img src="https://www.roadsbridges.com/sites/rb/files/styles/content_type_page/public/Traffic_Safety_64.jpg?itok=a9CICO90" alt=""/>
</div>

Hi I wanna use the road image as a background but I want it too loop across the screen over and over infinitely as if the road is moving. What CSS or ReactJS code can I use to do that?

CodePudding user response：

This will definitely take that image and run it over and over again. without animating it.

.bg
{
  background: url("https://www.roadsbridges.com/sites/rb/files/styles/content_type_page/public/Traffic_Safety_64.jpg?itok=a9CICO90");
  width: 100vw;
  height: 100vh;
  background-size: 300px 100px;
}

<div >
</div>

CodePudding user response：

I think you can use css property tranform-y and animations

CodePudding user response：

There are different ways to do it, look at this codepen https://codepen.io/konker/pen/Qozzrj

#road {
 opacity:.9;
 width: 120vw;
 height: 20vw;
 min-height:200px;
 background: #888;
 background-image: linear-gradient(
  rgba(0, 0, 0, 0.7) 0%,
  rgba(0, 0, 0, 0.2) 35%,
  rgba(80, 80, 80, 0.2) 50%,
  rgba(30, 30, 30, 0.4) 70%,
  rgba(60, 60, 60, 0.5) 87%,
  rgba(180, 180, 180, 0.5) 100%
 ),
 url("image url");
 background-size: 19vw auto;
 transform-origin: center top;
 transform: rotateX(45deg) translate(-20vw);
 animation: stripemove 0.2s linear infinite;
}

@keyframes stripemove {
 to {
   transform: rotateX(45deg) translate(0vw);
 }
}

Use the animation property like:

.bg img {
  height: 25vh;
  width: 200vw;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  animation: moving 3s linear infinite 1s;
}

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