CSS動畫（位置）不光滑

Question

我做了一個微妙的背景運動，但效果並不令人滿意。在移動它時有點混亂，你可以看到圖像逐像素移動。

我該如何改變它，使它成爲一個很好的流暢動畫。

守則（https://jsfiddle.net/38tf0j21/）：

body { 
 
    padding:50px; 
 
    margin 0; 
 
    height:100vh; 
 
} 
 
.landing_img_container { 
 
    position: absolute; 
 
    right: 0; 
 
    width: calc(100% - 100px); 
 
    height: 100%; 
 
    animation-name: start_animation; 
 
    animation-delay: 1s; 
 
    animation-direction: normal; 
 
    animation-duration: 5s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease; 
 
} 
 
.landing_img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color:red; 
 
} 
 
@keyframes start_animation { 
 
    0% { 
 
    left: 100px; 
 
    } 
 
    100% { 
 
    left: 50px; 
 
    } 
 
}

<div class="landing_img_container"> 
 
    <div class="landing_img"></div> 
 
</div>

Answer 1

這應該像你期望：https://jsfiddle.net/38tf0j21/2/

這是使用的，而不是left

Answer 2

對於光滑CSS位置動畫，你需要使用transform: translate3d屬性。

See this example