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的{{1}}。此值的计算与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%;
  }
}

Answer 2

使用变换而不是背景大小

.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>

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秒，很明显每个像素都被重新加载。

如果将此时间更改为1s，您会发现它随着动画之间的时间间隔的增加而运行得更加流畅。

但是由于5秒钟应该持续，所以最简单的解决方案是将@Félix或@TemaniAfif答案中的代码片段添加到您的代码中，这实际上是对您的问题的2个好答案。

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

3 个答案: