CSS动画(位置)不流畅 [英] CSS animation (position) not smooth

问题描述

我做了一个微妙的背景运动，但效果却不那么令人满意.有点晃动时，您可以看到图像逐像素移动.

I made a subtle background movement, but the effect isn't that pleasing. While moving it kinda jerks, you can see the image move pixel by pixel.

如何更改它，使其成为一个很好的平滑动画.

How can I change this so it becomes a nice smooth animation.

代码( https://jsfiddle.net/38tf0j21/):

The Code (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>

推荐答案

这应该像您期望的那样工作:https://jsfiddle.net/38tf0j21/2/

This should work like you expect it to: https://jsfiddle.net/38tf0j21/2/

这是使用 transform 属性而不是 left

这篇关于CSS动画(位置)不流畅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！