background image zoom with css3 transition, shakes in chrome

Question

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.

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.

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?

https://jsfiddle.net/xav8t479/4/

.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;
}

<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%;">
    <div class="content" style="margin-top: 150px">
     
     <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;<span></span></span></a>
    </div>
   </div>

Answer 1

In a slow transformation like this one you need to use GPU accelerated CSS rules (transform).

Here is why :

• Really smoother in terms of image interpolation
• Less CPU intensive
• Supported by IE9 & above
• Because it just rocks

The caveat is that you can't transform a background-image only. This is why in my solution I use an absolute positioned div and hiding the overflow on the parent container.

Here is an updated version of your fiddle

.highlight {
  display: block;
  position: relative;
  height: 400px;
  border: 1px solid black;
  overflow: hidden;
  position: relative;
}

.content {
  min-height: 520px;
  height: 800px;
}

.animatedBackground{
  width: 100%;
  height: 100%;
  animation: zoomin 30s infinite;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

@keyframes zoomin {
    0% {
      opacity: 0;
      background-size: cover;
      transform: scale(1);
    }
    5% {
      opacity: 1;
    }
    98% {
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

<div class="highlight">
  <div class="content">
    <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;</span></a>
  </div>
  <div class="animatedBackground" style="background-image:url(http://www.eahealthsolutions.com/wp-content/uploads/2016/05/EA_Health_On_Call_Compensation_8916.jpg);"></div>
</div>