Smoothing background scale css3 transform

Question

Trying to apply zoom a background image using CSS animations and transforms but it seems to be working a bit laggy:

Reproduction online

Is there anything I can do about it?

@keyframes animateBg {
  from {
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    visibility: visible;
  }

  to {
    -ms-transform: scale(1.45, 1.45);
    transform: scale(1.45, 1.45);
  }
}
.animate-bg{
    -webkit-animation-name: animateBg;
    animation-name: animateBg;

}
.animate{
  -webkit-animation-duration: 5000ms;
  animation-duration: 5000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-timing-function: cubic-bezier(.3,0,.7,1);
  timing-function: cubic-bezier(.3,0,.7,1);
}

.bg{
    background-image: url(http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg);
    height: 100%;
    width: 100%;
    display: block;
    position:absolute;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-position: center;
    background-size: cover;
}

Answer 1

At least in Chrome, adding a translateZ makes it much more smooth

(also removed the "visibility" from the keyframes)

 html,body{ height:100%; margin:0; padding:0; overflow:hidden; } .bg{ background-image: url(http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg); height: 100%; width: 100%; display: block; position:absolute; z-index: -1; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-position: center; background-size: cover; } .animate-bg{ -webkit-animation-name: animateBg; animation-name: animateBg; } .animate{ -webkit-animation-duration: 5000ms; animation-duration: 5000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(.3,0,.7,1); animation-timing-function: cubic-bezier(.3,0,.7,1); animation-iteration-count: infinite; } @keyframes animateBg { from { -ms-transform: scale(1,1); transform: scale(1,1) translateZ(1px); } to { -ms-transform: scale(1.45, 1.45); transform: scale(1.45, 1.45) translateZ(1px); } } 

 <div class="bg animate animate-bg"> </div>