title: Why the background fluctuating on animation using CSS?
body: <p>I'm  using the below styling to create animated background, but the image is fluctuating/wobbling. Need a solution to keep the image steady as it changes</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="mydiv"&gt;&lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>.mydiv {
      width:100%;
      height:100%;
      color:black;
      animation: myanimation 20s infinite;
      }
      @keyframes myanimation {
      0% {background-image: url(../images/bg1.jpg);
      height: 1080px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      }
      25%{background-image: url(../images/bg.jpg);
      height: 1080px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: obsolute;}
      50%{background-image: url(../images/bg2.jpg);
      height: 1080px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;}
      100%{background-image: url(../images/bg3.png);
      height: 1080px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;}
  }
  </code></pre>
  
  <p>Any Ideas to remove this will be appreciated. Thanks</p>