Here is 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". Firstly, "Animation" has only one strip of color, blue, where "Replica" has two colored stripes: red and blue. Key frames work only by deceiving the eye, thinking that he sees the same lane that runs all the way through the bar. This only works when it stays the same color!
Although my jsfiddle will work with two colors, the effect is that one strip moves across the panel, but it alternates between red and blue while moving. Not inherently a bad effect, but why Replica is not working, as well as Animation. The code only supports one color. Two colors is good, but it will take a few trial and error to find out the distance that the strips should travel, as well as their number, their width and the distance between them.
The second reason is because your keyframes were not synchronized properly.
"Animation" moves lanes up to 20 pixels before the loop, and this is great because the distance between the lanes and the number of lanes and the lane width means that this distance successfully deceives the eye, thinking that it sees the same lane moving completely through the panel.
0% { -webkit-transform: translate3D(-30px,0,0); } 100% { -webkit-transform: translate3D(-10px,0,0); }
With "Replica", although the number of bands is the same, the distance between them is different, which leads to a sharp effect when the bars seem to be "jumping". In fact, the animation simply alternates too quickly, and the bars do not move at the right distance for the animation to fool the eye. Because of this, with a small test error, I found that the 24px distance is the smoothest distance:
@-webkit-keyframes WEBKIT-BP { 0% { -webkit-transform: translate3D(-30px, 0, 0); } 100% { -webkit-transform: translate3D(-6px, 0, 0); } }