[SOLVED] background-size animation is going jerky

background-size animation is going jerky

I'm just trying to animate a background but it is moving weirdly
anyone has encountered a similar issue?

thank you so much in advance =)

.bkg {
  width: 100vw;
  height: 600px;
  background-image: url("https://ilcastellovolante.it/wp-content/uploads/2021/04/IMG_0593-scaled.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  animation: example 3s infinite;
}

@keyframes example {
  from {background-size: 100% auto;}
  to {background-size: 102% auto;}
}

<body>
<div class="bkg"></div>
</body>

Solution

This is due to the centering. better consider an extra layer and animate scale()

.bkg {
  height: 600px;
  position:relative;
  overflow:hidden;
}
.bkg:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: url("https://ilcastellovolante.it/wp-content/uploads/2021/04/IMG_0593-scaled.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  animation: example 3s infinite;
}

@keyframes example {
  to {transform:scale(1.02)}
}

<div class="bkg"></div>