CODEWITHSUNDEEP
htmlcsscss-animations
Gavin
Gavin

Reputation: 6394

Left to right CSS3 animation starting from center

I'm working on an HTML5 game which has an object that needs to start centered, move to the left out of view and then appear from the right to complete and repeat.

@-webkit-keyframes marquee {
    0% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-100vw, 0, 0); }
    75% { transform: translate3d(100vw, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
@-moz-keyframes marquee {
    0% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-100vw, 0, 0); }
    75% { transform: translate3d(100vw, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
@-ms-keyframes marquee {
    0% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-100vw, 0, 0); }
    75% { transform: translate3d(100vw, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee {
    0% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-100vw, 0, 0); }
    75% { transform: translate3d(100vw, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
div {
    width: 200px;
    height: 50px;
    background: red;
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translate3d(-50%, 0, 0);
    animation: marquee 5s linear infinite;
}

http://jsfiddle.net/gRoberts/0esr1abL/

I've created a simple fiddle which shows what I am trying to do, however you'll notice that once it reaches the left, it zips to the right and then carries on. I've tried getting around this by using opacity, however this causes undesired effects (object fades in/out.)

I have the following working now, however the object starts off screen, which isn't ideal:

@-webkit-keyframes marquee {
  0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
  100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
@-moz-keyframes marquee {
  0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
  100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
@-ms-keyframes marquee {
  0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
  100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
@keyframes marquee {
  0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
  100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
div {
    width: 200px;
    height: 50px;
    background: red;
    position: absolute;
    top: 15px;
    animation: marquee 5s linear infinite;
}

http://jsfiddle.net/gRoberts/rr969j09/

Any suggestions on to get the above fiddle working but starting from the center?

Upvotes: 3

Views: 2042

Answers (1)

Harry
Harry

Reputation: 89750

You can use the first snippet from the question but change the opacity immediately (within .1% of the animation duration). Changing the opacity from 1 to 0 between 50% and 50.1% would make the element get hidden abruptly and not show up as it goes from the left to the right. Similarly changing the opacity back to 1 at 75.1% would make it visible when it comes back into view from the right.

Initially when you had tried, I think you may have changed the opacity at a higher interval and thus making it give a fade-in/out like appearance.

The animation was speeding up and slowing down because for the first 50% it was going from centre to left (-100vw) but it was taking only 25% of the time to come back in from the right to centre. I have modified this to allocate equal splits (that is, center to left from 0-45% and from right to centre between 55-100%) and this makes it look more smoother. It could be tuned further but I think you get the idea.

@keyframes marquee {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    45% {
        transform: translate3d(-100vw, 0, 0);
        opacity: 1;
    }
    45.1% {
        opacity: 0; /* at this point in time the element is fully on the left and hidden */
    }
    55% {
        transform: translate3d(100vw, 0, 0);
        opacity: 0; /* at this point in time the element is fully on the right but still hidden */
    }
    55.1% {
        opacity: 1; /* now we make it visible again so that it can come back into view */
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}
div {
    width: 200px;
    height: 50px;
    background: red;
    position: absolute;
    left: 50%;
    top: 15px;
    animation: marquee 5s linear infinite;
}
body {
    overflow: hidden;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>

Upvotes: 2

Related Questions