[Update: The solution involved creating two containers, with the second animation container configured to have left: 100%.]
I designed a simple animation that moves a large gif image across the page horizontally, where the width of the gif is 1536px.
Since the page can expand infinitely, the animation starts at right: 0px and finishes at right: 100%. Realistically, I don't anticipate the page size exceeding the highest monitor resolutions currently in use.
To give the impression that the animation is happening indefinitely, I set up a second animation beginning at right: -1536px and ending at right: 100%.
However, the second animation covers a greater distance and consequently travels faster than the first. This variation in speed disrupts the seamless flow of the animation. Is there a method to specify the animation-duration to proceed at a consistent rate of 1px per second or similar instead of based on time? Adjusting the duration may not be feasible since the browser size could vary.
Any assistance or suggestions would be greatly appreciated!
The code I am working with is provided below:
@-webkit-keyframes frontrocks-anim2 {
0%{right:-1536px;}
100%{right:100%;}
}
@-moz-keyframes frontrocks-anim2 {
0%{right:-1536px;}
100%{right:100%;}
}
.frontrocks-anim2 {
-webkit-animation:frontrocks-anim2 30s infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-delay: 0s;
-moz-animation:frontrocks-anim2 30s infinite;
-moz-animation-timing-function:linear;
-moz-animation-delay: 0s;
}