How to Remove Noise when Animating background-size

Consider a scale transformation to have a better rendring:

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

You are centering the background which means applying a background-position equal to 50%. The calculation of this value is related to the background-size so the position is changing slightly when the size is changing creating this bad effect:

If you consider a position using pixel values you will not see this effect:

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


Use transform instead of 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>

Tags:

Html

Css