如何在动画背景大小时消除噪点

Question

标签有一个背景图片，我想把它无限缩放。我尝试在动画中改变 background-size 属性，但是你会发现，在动画过程中会有噪声或震动。如何去除这个问题？

.pre-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
  background-size: 50%;
  animation: loading 5s ease-in-out infinite;
}

@keyframes loading {
  0% {
    background-size: 50%
  }
  50% {
    background-size: 55%
  }
  100% {
    background-size: 50%
  }
}

<div class="pre-loader"></div>

- Kareem Dabbeet

Answer 1

考虑进行比例缩放以获得更好的渲染效果：

.pre-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow:hidden;
}
.pre-loader:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center/50% auto no-repeat #fff;
  animation: loading 5s ease-in-out infinite;
}

@keyframes loading {
  50% {
    transform:scale(1.1);
  }
}

<div class="pre-loader"></div>

你正在居中背景，这意味着应用一个等于50％的background-position。该值的计算与background-size相关，因此当大小改变时，位置会略微改变，从而产生不良效果：

如果使用像素值考虑位置，则不会出现此效果：

.pre-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow:hidden;
}
.pre-loader:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') 50px 50px/50% auto no-repeat #fff;
  animation: loading 5s ease-in-out infinite;
}

@keyframes loading {
  50% {
    background-size:55%;
  }
}

<div class="pre-loader"></div>

- Temani Afif

---

但是，颤抖效果的原因是什么，你能说一下吗？ - Anurag Srivastava

@AnuragSrivastava 背景大小的计算有点复杂，因为它还会影响背景位置。因此，当大小发生变化时，位置也会略微改变，从而产生抖动效果（与大小和位置之间的关系相关，请参见：https://dev59.com/hVUK5IYBdhLWcg3wgQHd#51734530）。 - Temani Afif

@AnuragSrivastava 如果您考虑一个静态位置（例如左上角），则不会有任何抖动：https://jsfiddle.net/pqs6ocjy/，因为在这种情况下大小不会影响位置。 - Temani Afif

Answer 2

使用transform代替background-size

.pre-loader {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
 background-size: 50%;
 animation: loading 5s ease-in-out infinite;
}
@keyframes loading {
 50% { 
  transform: scale(1.2); 
 }
 100% { 
  transform: initial;
 }
}

    <div class="pre-loader"></div>

- Félix

Answer 3

你的代码没有问题，问题出在CSS上。我认为你的动画存在性能问题：

@keyframes loading { 
    0% { 
        background-size: 50% 
    }
    50% { 
        background-size: 55% 
    }
    100% { 
        background-size: 50% 
    }

动画将重新定位每个图像的每个像素。所以我认为这对浏览器的渲染来说会有点沉重。

此外，您使用的 animation: loading 5s ease-in-out infinite; 动画时间也是制造噪音的因素之一。使用 5 秒的动画时间，每个像素都会重新加载，这一点变得很明显。

如果您将此时间更改为 1 秒，则会发现它运行更流畅，因为动画之间的时间过得更快。

但由于 5 秒应该保持不变，最简单的解决方案是将 @Félix 或 @TemaniAfif 的代码片段添加到您的代码中，这些都是针对您问题的两个很好的答案。

- 41 72 6c