平滑背景比例css3变换

Question

试图使用CSS动画和转换应用缩放背景图像，但似乎有点滞后：

在线复制

我能做些什么吗？

@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

至少在Chrome中，添加translateZ会使更加流畅

（还删除了关键帧的"可见性"）

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>