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

Question

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

Is the image seamless? (ie, right side perfectly matches up with left side?) It might be possible to simply transition by exact pixel amount, based on the size of the image - and that should work on all browser sizes. — Katana314, Aug 06 '15 at 14:01
@Katana314 Do you mean change {right:100%;} to an exact pixel amount? What would happen if the page was wider than the pixel amount, wouldn't it stop short of the end of the page? — Craig W, Aug 06 '15 at 14:31
@CraigW Well, if this were for instance a repeating background that's meant to repeat across the whole page, then `right: 0` and `right: imgSizepx` would be indistinguishable. It may be hard to make better suggestions without some visualization of the intent. — Katana314, Aug 06 '15 at 14:45

score 1 · Accepted Answer · edited May 23 '17 at 12:21

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>

How do I make the image start at the right side of the page, whatever the width of the page is? — Craig W, Aug 06 '15 at 16:01
Start the images with `left:100%`. Code edited to reflect that. — Palpatim, Aug 06 '15 at 16:56
Actually, belay that--it starts at the correct location, but doesn't properly handle the width of the image. — Palpatim, Aug 06 '15 at 16:57
I think you was right the first time but I hadn't interpreted it properly and my divs were causing issues. I created two containers, had the second container start at left:100%. — Craig W, Aug 07 '15 at 10:21

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

1 Answers1