Reputation: 115
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
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
Reputation: 2358
For smooth CSS position animations you need use transform: translate3d
property.
Upvotes: 2