使用JS动画缩放背景图出现抖动，如何实现平滑效果？

Hey, I get it—using jQuery's animate() to scale a background image can lead to jittery animations, and that's totally frustrating. The core issue here is that jQuery's animations rely on JavaScript to update styles frame by frame, which doesn't get the same hardware acceleration benefits as browser-native CSS animations. Let's walk through a couple of better solutions to get that buttery-smooth background scale effect:

方案1：CSS Transition + 类触发（最推荐） #

CSS transitions are handled directly by the browser, so they're optimized for performance and will avoid the jitter you're seeing. We'll use a CSS transition on the background-size property, then trigger the animation by adding a class with jQuery.

修改后的完整代码： #

HTML

<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS

#container {
  width: 500px;
  height: 300px;
  margin-top: 100px;
  margin-left: 100px;
  background-color: #eeeeee;
  background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
  background-repeat: no-repeat;
  background-position: center;
  /* 核心：添加过渡效果，指定动画时长和缓动函数 */
  transition: background-size 4s ease;
  /* 设置初始背景尺寸（这里用cover适配容器，你也可以用具体像素值） */
  background-size: cover;
}

/* 触发动画的类，定义目标背景尺寸 */
#container.bg-scale {
  background-size: 1000px;
}

JavaScript

$('body').on('click', '#container', function() {
  $(this).addClass('bg-scale');
  
  // 如果需要重复触发动画，在动画结束后移除类
  setTimeout(() => {
    $(this).removeClass('bg-scale');
  }, 4000);
});

为什么这更平滑？ #

CSS transitions use the browser's built-in animation engine and can leverage GPU acceleration, which reduces the amount of layout recalculations (reflows) the browser has to do. This eliminates the jitter caused by JavaScript-driven frame-by-frame updates.

方案2：CSS Keyframes 关键帧动画（适合复杂动画逻辑） #

If you need more control over the animation's progression (like changing speed mid-animation), CSS keyframes are a great option.

完整代码： #

CSS

#container {
  width: 500px;
  height: 300px;
  margin-top: 100px;
  margin-left: 100px;
  background-color: #eeeeee;
  background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 定义关键帧动画的全过程 */
@keyframes scaleBackground {
  from {
    background-size: cover;
  }
  to {
    background-size: 1000px;
  }
}

/* 动画触发类 */
#container.bg-animate {
  animation: scaleBackground 4s ease forwards;
}

JavaScript

$('body').on('click', '#container', function() {
  $(this).addClass('bg-animate');
  
  // 监听动画结束事件，移除类以便重复触发
  $(this).one('animationend', function() {
    $(this).removeClass('bg-animate');
  });
});

如果你坚持要用jQuery Animate #

While I strongly recommend the CSS solutions above, if you need to stick with jQuery's animate(), you can try tweaking it to improve smoothness:

$('body').on('click', '#container', function() {
  $("#container").animate({
    "background-size": "1000px"
  }, {
    duration: 4000,
    easing: 'easeInOutQuad', // 使用更自然的缓动函数
    step: function(now) {
      $(this).css('background-size', now + 'px');
    }
  });
});

Note that this still won't match the smoothness of CSS animations, since it's still relying on JavaScript to drive the animation.

内容的提问来源于stack exchange，提问作者Дмитрий Верёвкин