Animate a div background image

Question

I have an image in a div using

<div style="background-image: url(...);></div>

which is quite big.

I want to make some movement in the background image. So I want to zoom in a little bit and do some translation, so it seems like the image is moving a little bit.

I want it to loop infinitely.

I have tried using Animate.css with <div class="animated pulse infinite"></div>, but I don't want the div to move, only the background photo inside the div. The pulse effect is also a bit too much. I just want it to have a little motion. Maybe just translate in the x direction to the left and then to the right

Edit

I have tried

@keyframes animatedBackground {
  from {
    background-size: cover;
    background-position: 50% 22%;
  }
  to {
    background-size: cover;
    background-position: 100% 22%;
  }
}

but it seems not to work if I use background-size: cover?

Edit 2

I found out that it does work, but the width is 100%, so it doesn't make any difference if I use background-position: 50% 22%; or background-position: 100% 22%;, but if I change the y-direction, it does work :-D

But if I set the animation time to more seconds than 5s, it becomes very laggy. Are there any way to avoid the lag?

Answer 1

You can just use CSS3 @keyframes to animate the background-position, e.g.:

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(https://picsum.photos/400/200);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}

<div id="animate-area"></div>

See MDN for more information about the CSS animations.

Answer 2