title: Animate a div background image
body: <p>I have an image in a div using</p>
  
  <pre><code>&lt;div style="background-image: url(...);&gt;&lt;/div&gt;
  </code></pre>
  
  <p>which is quite big.</p>
  
  <p>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.</p>
  
  <p>I want it to loop infinitely.</p>
  
  <p>I have tried using <a href="https://daneden.github.io/animate.css/" rel="noreferrer">Animate.css</a> with <code>&lt;div class="animated pulse infinite"&gt;&lt;/div&gt;</code>, 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</p>
  
  <h1>Edit</h1>
  
  <p>I have tried</p>
  
  <pre><code>@keyframes animatedBackground {
    from {
      background-size: cover;
      background-position: 50% 22%;
    }
    to {
      background-size: cover;
      background-position: 100% 22%;
    }
  }
  </code></pre>
  
  <p>but it seems not to work if I use <code>background-size: cover</code>?</p>
  
  <h1>Edit 2</h1>
  
  <p>I found out that it does work, but the width is 100%, so it doesn't make any difference if I use <code>background-position: 50% 22%;</code> or <code>background-position: 100% 22%;</code>, but if I change the y-direction, it does work :-D</p>
  
  <p>But if I set the animation time to more seconds than 5s, it becomes very laggy. Are there any way to avoid the lag?</p>