平滑背景缩放 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 使其更加流畅

（还从关键帧中删除了 "visibility"）

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>

平滑背景缩放 css3 变换

Smoothing background scale css3 transform

css

css-transitions

css-transforms

css-animations