css - 摆脱动画上的 css 抖动

Question

谁能帮我解决 css 抖动问题？

此处为 HTML:

<div class="carousel-inner">
  <div class="item">
  </div>
</div>

此处的 CSS:

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.item {
  background-image: url(https://images.unsplash.com/photo-1462834026679-7c03bf571a67?dpr=1&auto=format&fit=crop&w=1500&h=989&q=80&cs=tinysrgb&crop=);
  background-position: right bottom;
  background-size: 100% 100%;
  animation: wdszoom0 5s linear 0s infinite alternate;
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
}
@-webkit-keyframes wdszoom0 { 100% { background-size: 120% 120%; }}

在这里 fiddle : https://jsfiddle.net/kybernaut/zkzod6wh/2/

我读过这个那个，但没有帮助我:

• Jitter on chrome css animations

• Chrome CSS 3 Transition Not Smooth

Answer 1

最好为 transform 属性设置动画，因为它更平滑。在 this示例 我使用 transform: scale 更改了 background-size。

@-webkit-keyframes wdszoom0 { 100% { transform: scale(1.1) }}

您可以在 article 中阅读更多关于平滑动画的信息.