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/

このtransformプロパティを使用して、代わりにleft

Answer 2

スムーズなCSS位置アニメーションの場合は、あなたはtransform: translate3dプロパティを使用する必要があります。

See this example