CSS3 动画：如何创建背景图像的平滑移动？似乎是 Chrome 唯一的问题

Question

尝试在短像素距离内平滑地设置 div's 背景图像 #bg2 的动画（同时剪辑路径在其上设置动画）。我无法让图像平稳移动，它会抖动和抖动。剪辑路径动画很好

我尝试了另一个 SO 线程中建议的不同缓动（linear / ease-in-out 等），并且还延长了它需要移动的距离，但它似乎仍然逐像素跳跃（有点），而不是平稳地移动。（虽然，在实际用例中，延长移动距离不是一个选项）。

猫背景图片#bg2的流畅移动如何实现？谢谢。

** 编辑：在 Firefox 中对我来说完全流畅，在 Mojave 10.14.6 上的 Chrome 91.0.4472.114 中对我来说很紧张，在 Safari 中则不那么紧张。对于其他人来说，Chrome 似乎也很顺利。嗯...

var clickTag = "#";

#main-container {
  position: absolute;
  width: 970px;
  height: 250px;
  left:-200px;
  box-sizing: border-box;
  background: #333;
  overflow:hidden; perspective: 800px;
  border:1px solid #ccc;
}

div, img {
    position: absolute;
    background-repeat:no-repeat;
    width: 970px;
    height: 250px;
    z-index: 4;
    background-size: 970px 250px;
}


#bg2{
    width: 970px;
    height: 250px;
    z-index:2;
    background-image:url('https://i.stack.imgur.com/6EcDu.jpg');
    -webkit-clip-path: circle(9% at 682px 110px);
    clip-path: circle(9% at 682px 110px);
    transform: translateY(20px);
    background-position: -5px -10px;
}

#bg2{animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;-webkit-animation: groww 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;}

@-webkit-keyframes groww {
 0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);-webkit-clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
 100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);-webkit-clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}

@keyframes grow {
 0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
 100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}

<a href="javascript:window.open(window.clickTag)">
<div id="main-container" class="animate">
    <div id="bg2"></div>
</div>
</a>

Answer 1

我有点好奇为什么有一个大横幅而不是全部显示。

无论如何，我提供了另一种动画方式，基本上只是改变高度。希望这可以提供一些想法。

我删除了宽度以使其更灵敏。

此解决方案中的动画有些抖动，但我想这取决于您的贝塞尔曲线。所以也许这就是一直以来的问题？

var clickTag = "#";

#main-container {
  position: relative;
  height: 250px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background-color: #333;
}

#bg2 {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);

  height: 40%;
  aspect-ratio: 1;
  border-radius: 50%;

  background-image: url('https://i.stack.imgur.com/6EcDu.jpg');
  background-position: right 25% center;
  
  animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

@keyframes grow {
  to { height: 80%; }
}

<a href="javascript:window.open(window.clickTag)">
  <div id="main-container">
    <div id="bg2"></div>
  </div>
</a>

CSS3 动画：如何创建背景图像的平滑移动？似乎是 Chrome 唯一的问题

CSS3 Animation: How do I create smooth movement of background image? Seems to be a Chrome only issue

css

css-animations