Jamgreen Jamgreen - 1 month ago 5
CSS Question

Animate a div background image

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

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(http://placekitten.com/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.