Question

有人可以帮我解决如何摆脱css抖动吗？

HTML here：

<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%; }}

这里小提琴： https://jsfiddle.net/kybernaut/zkzod6wh/2/

我已经读过这个，但是没有帮助我：

Answer 1

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

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

您可以在此article中详细了解平滑动画。

摆脱动画上的css抖动

1 个答案: