Set two webkit-animations to be same speed with one travelling a longer distance?

[Edit: Solution was to create two containers, with the second animation container set to left: 100%.]

I have a very basic animation to move a large gif across the page, the gif is 1536px wide.

The page can be infinitely wide and thus the animation starts at right:0px and ends at right:100%. In reality, I don't expect the page to ever be larger than the highest monitor resolutions used currently.

In order to create the feeling that the animation was occurring infinitely I have created a second animation and started this at right:-1536px and ending at right:100%.

Unfortunately, as this second animation is covering a greater distance it is moving faster than the first and my attempted seamless animation doesn't work. Is there a way to specify that animation-duration work at a constant 1px per second or something equivalent instead of a duration? I don't believe I can increase the duration to match as the browser could be any size.

Any help or ideas appreciated!

My code is as follows:

@-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;
}

UPDATE

A better solution is to adapt Oriol's comment from https://stackoverflow.com/a/21088405/603369

That provides a smoothly scrolling background, so all that is left is to animate the background element to "fly in" upon page load.

The problem is that the initial "fly-in" must be based on the width of the container (e.g., the page), while the repeating background must be based on the width of the background image. That leads to some oddities in timing, where the initial "fly-in" from the right side may be significantly faster or slower than the background animation. You might be able to adapt this solution further by using JavaScript to adjust the timing based on the width of the page, but this should give you a starting point.

header {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 52px;
  border: 1px solid #ccc;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: -1536px;
  background: url(https://placehold.it/1536x50/cceecc) 0% 0% repeat;
  z-index: -1;

  -webkit-animation-name: slide-in, bg-anim-repeat;
  -webkit-animation-duration: 5s, 5s;
  -webkit-animation-timing-function: linear, linear;
  -webkit-animation-iteration-count: 1, infinite;
  -webkit-animation-delay: 0s, 5s;
}

@-webkit-keyframes bg-anim-repeat {
  0% {-webkit-transform: translateX(0);}
  100% {-webkit-transform: translateX(-1536px);}
}

@-webkit-keyframes slide-in {
  0% {left: 100%;}
  100% {left: 0;}
}

<header>
  <div class="bg"></div>
</header>

Original

If the page is larger than 1536x2, you're going to have an odd visual look as the two gifs march across the screen. But if this is what you want to go with, try delaying the beginning of the second animation until halfway through the first animation.

Demo of the second option is below

header {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 52px;
  border: 1px solid #ccc;
}

header img {
  position: absolute;
  left: 100%;
}

@-webkit-keyframes frontrocks-anim {
  0%{left:100%;}
  100%{left:-1536px;}
}

#image1, #image2 {
    -webkit-animation:frontrocks-anim 10s infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay: 0s;
    -moz-animation:frontrocks-anim 10s infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-delay: 0s;
}
/* Delay is 1/2 of the total animation time */
#image2 {
    -moz-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

<header>
<img src="https://placehold.it/1536x50/cceecc" alt="moving image 1" id="image1">
<img src="https://placehold.it/1536x50/eecccc" alt="moving image 1" id="image2">
</header>