css3 3D transform doesn't animate smoothly

Question

I found this CSS3 3D Animation : Animation ; and I'm trying to replicate it : Replica ; but as you can see my animation jumps without being smooth at the other is.

My HTML looks like this :

<div class="pole-container">
    <div class="pole">

        <div class="stripes-wrapper">
            <span class="stripe-01"></span>
            <span class="stripe-02"></span>
            <span class="stripe-03"></span>
            <span class="stripe-04"></span>
            <span class="stripe-05"></span>
            <span class="stripe-06"></span>
            <span class="stripe-07"></span>
            <span class="stripe-08"></span>
            <span class="stripe-09"></span>
            <span class="stripe-10"></span>
            <span class="stripe-11"></span>
            <span class="stripe-12"></span>
        </div>

    </div>
</div>

And the CSS :

.preloader-container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: #FFFFFF;
    z-index: 5;

    opacity: 1;

    -webkit-transition: all 500ms ease-out;
       -moz-transition: all 500ms ease-out;
         -o-transition: all 500ms ease-out;
            transition: all 500ms ease-out;
}

.preloader-container.hidden {
    display: block !important;
    visibility: visible;
    opacity: 0;
    z-index: 0;
    pointer-events: none;

}

.pole-container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -20px;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotateX902deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.pole-container::after {
    position: absolute;
    display: block;
    content: "";
}


.stripes-wrapper {
    white-space: nowrap;   
   -webkit-animation: WEBKIT-BP .5s linear infinite;
   -moz-animation: MOZ-BP .5s linear infinite;
   -ms-animation: MS-BP .5s linear infinite;
   -o-animation: O-BP .5s linear infinite;
   animation: BP .5s linear infinite;
}

.stripes-wrapper span {
    margin: 0;
    display: inline-block;
    margin-left: 10px;
    width: 10px;
    height: 40px;
    background: #9FCBDA;
    -webkit-transform: skew(32deg);
    -moz-transform: skewX(32deg);
    -ms-transform: skew(32deg);
    -o-transform: skew(32deg);
    transform: skew(32deg);
}

Can anyone point to the reason why my animation isn't acting in the same manner, I would appreciate it ?

Answer 1

Following what Roland said, try these:

    .bs-stripes-wrapper {
    height: 40px;
    white-space: nowrap;   
   -webkit-animation: WEBKIT-BP 1s linear infinite;
   -moz-animation: MOZ-BP 1s linear infinite;
   -ms-animation: MS-BP 1s linear infinite;
   -o-animation: O-BP 1s linear infinite;
   animation: BP 1s linear infinite;
}

and change these:

@-webkit-keyframes WEBKIT-BP {
    0%   {
        -webkit-transform: translate3D(-60px, 0, 0);
    }

    100% {
        -webkit-transform: translate3D(-12px, 0, 0);
    }
}

@-moz-keyframes MOZ-BP {
    0%   {
        -moz-transform: translateX(-60px);
    }
    100% {
        -moz-transform: translateX(-12px);
    }
}
@-ms-keyframes MS-BP {
    0%   {
        -ms-transform: translateX(-60px);
    }
    100% {
        -ms-transform: translateX(-12px);
    }
}
@-o-keyframes O-BP {
    0%   {
        -o-transform: translateX(-60px);
    }
    100% {
        -o-transform: translateX(-12px);
    }
}
@keyframes BP {
    0%   {
        transform: translateX(-60px);
    }
    100% {
        transform: translateX(-12px);
    }
}

Since you have two lines, you need to move twice as far, and do it in double the speed since the distance is greater.

I'm not sure if you are really benefitting from doing the animation this way, but it is an interesting experiment.

Answer 2

Here's your answer:

http://jsfiddle.net/gPsdk/40/

.preloader-container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: #FFFFFF;
    z-index: 5;

    opacity: 1;

    -webkit-transition: all 500ms ease-out;
       -moz-transition: all 500ms ease-out;
         -o-transition: all 500ms ease-out;
            transition: all 500ms ease-out;
}

.preloader-container.hidden {
    display: block !important;
    visibility: visible;
    opacity: 0;
    z-index: 0;
    pointer-events: none;

}

.pole-container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -20px;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotateX902deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.pole-container::after {
    position: absolute;
    display: block;
    content: "";
}


.stripes-wrapper {
    white-space: nowrap;   
   -webkit-animation: WEBKIT-BP .5s linear infinite;
   -moz-animation: MOZ-BP .5s linear infinite;
   -ms-animation: MS-BP .5s linear infinite;
   -o-animation: O-BP .5s linear infinite;
   animation: BP .5s linear infinite;
}

.stripes-wrapper span {
    margin: 0;
    display: inline-block;
    margin-left: 10px;
    width: 10px;
    height: 40px;
    background: #9FCBDA;
    -webkit-transform: skew(32deg);
    -moz-transform: skewX(32deg);
    -ms-transform: skew(32deg);
    -o-transform: skew(32deg);
    transform: skew(32deg);
}

span.stripe-01 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-02 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-03 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-04 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-05 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-06 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-07 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-08 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-09 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-10 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-11 {
    background-color: rgba(217, 007, 045, 1);
}

span.stripe-12 {
    background-color: rgba(217, 007, 045, 1);
}


@-webkit-keyframes WEBKIT-BP {
    0%   {
        -webkit-transform: translate3D(-30px, 0, 0);
    }

    100% {
        -webkit-transform: translate3D(-6px, 0, 0);
    }
}

@-moz-keyframes MOZ-BP {
    0%   {
        -moz-transform: translateX(-30px);
    }
    100% {
        -moz-transform: translateX(-6px);
    }
}
@-ms-keyframes MS-BP {
    0%   {
        -ms-transform: translateX(-30px);
    }
    100% {
        -ms-transform: translateX(-6px);
    }
}
@-o-keyframes O-BP {
    0%   {
        -o-transform: translateX(-30px);
    }
    100% {
        -o-transform: translateX(-6px);
    }
}
@keyframes BP {
    0%   {
        transform: translateX(-30px);
    }
    100% {
        transform: translateX(-6px);
    }
}

Now, there are two reasons why the animation 'jumps'. One is that 'Animation' has only one colour stripe, a blue one, where as 'Replica' has two colour stripes, red and blue. The key frames only work by tricking the eye into thinking its seeing the same one stripe travelling all the way across the bar. This only works when it remains the same colour!

Though my jsfiddle will work with two colours, the effect is it's the same stripe travelling across the bar, but it is alternating between red and blue as it travels. Not intrinsically a bad effect, but that's why Replica doesn't work as well as Animation. The code only supports one colour. Two colours is fine, but it'll require some trial and error to find out the distance the stripes must travel, as well as their number, their width and the distance between them.

The second reason is your key frames weren't syncronised properly.

"Animation" moves its stripes 20 pixels along before looping, and that's fine, because the distance between the stripes and the number of stripes and the width of the stripes means this distance succesfully tricks the eye into thinking its seeing the same stripe moving all the way across the bar.

0%   {
    -webkit-transform: translate3D(-30px,0,0);
}
100% {
    -webkit-transform: translate3D(-10px,0,0);
}

With "Replica", though the number of stripes is the same, the distance between them is different, resulting in a jarring effect where the bars seem to 'jump'. In reality, the animation is simply looping too soon, and the bars aren't moving across the required distance for the animation to fool the eye. Due to this, with a bit of trial an error, I found that a distance of 24px is the smoothest distance:

@-webkit-keyframes WEBKIT-BP {
    0%   {
        -webkit-transform: translate3D(-30px, 0, 0);
    }

    100% {
        -webkit-transform: translate3D(-6px, 0, 0);
    }
}