title: background image zoom with css3 transition, shakes in chrome
body: <p>I want to slowly and smooth zoom in on an image.
  The image is a background-image on an element. It works perfertcly in all browser except for Google Chrome. The shakes especially when it goes slow.</p>
  
  <p>I use a transition where i use background-size: 100% 100%; at 0% and background-size: 150% 150%; at 100% and the transition takes 30s. </p>
  
  <p>Here i did a little fiddle to explain it better.
  Just check this in Firefox and then Chrome and you will see my Problem.
  Is there a way to fix it?</p>
  
  <p><a href="https://jsfiddle.net/xav8t479/4/" rel="nofollow noreferrer">https://jsfiddle.net/xav8t479/4/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.highlight {
      display: block;
      position: relative;
      min-height: 520px;
      height: 800px;
  
  }
  @keyframes zoomin {
      0% {
        opacity: 0;
  
        background-size: 100% 100%;
       
      }
      5% {
        opacity: 1;
      }
      98% {
         
          animation-timing-function: ease-in;
          opacity: 1;
          
      }
      100% {
        
          opacity: 0;
          background-size: 150% 150%;
      }
  }
  
  
  .highlight {
    animation: zoomin 30s infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="highlight" style="background-image:url(http://www.eahealthsolutions.com/wp-content/uploads/2016/05/EA_Health_On_Call_Compensation_8916.jpg); background-position: 65% 50%;"&gt;
      &lt;div class="content" style="margin-top: 150px"&gt;
       
       &lt;a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;"&gt;Blabla &lt;span class="btnArrow"&gt;&amp;gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>