摆脱动画的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%; }} 

小提琴这里： 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流畅的动画。