CODEWITHSUNDEEP
csscss-animations
Ludo
Ludo

Reputation: 115

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.

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>

Upvotes: 1

Views: 4935

Answers (2)

nathan felix
nathan felix

Reputation: 396

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

This is using the transform property instead of left

Upvotes: 3

semanser
semanser

Reputation: 2358

For smooth CSS position animations you need use transform: translate3d property.

See this example

Upvotes: 2

Related Questions