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

Question

我有一个具有背景图片的div，并且我正在尝试无限地更改其比例。

我更改了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>

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>

您将背景居中，这意味着应用background-position等于50%。此值的计算与关联，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>