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>