背景大小的动画变得生涩

Question

我只是想为背景制作动画，但它移动得很奇怪
有人遇到过类似的问题吗？

非常感谢你提前=）

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

Answer 1

这是因为居中。最好考虑一个额外的层和动画 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>

背景大小的动画变得生涩

background-size animation is going jerky

css

animation

background-size