Use heavy (more that 400kb) svg as animated background (with css3)

Question

I have long(more then 1500px) and heavy(more that 400kb) image, which describes environment. i'm trying to animate that left to right, but animation is not smooth, movement is quite roughly. I tried different ways, all of them are described below. So have you any idea how to solve this roughly movement?

css3:

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}

.animation-wrapper { 
    width: 15447px; 
    height: 100%; 
    background-image: url('../pictures/animation-background.svg');
    background-position: 0px 0px;
    background-size: 15447px 800px;
    animation: animatedBackground 100s linear infinite;
    -moz-animation: animatedBackground 100s linear infinite;
    -webkit-animation: animatedBackground 100s linear infinite;
    -ms-animation: animatedBackground 100s linear infinite;
    -o-animation: animatedBackground 100s linear infinite;
}

jQuery - I split big SVG image into 20 small pieces, placed those pieces in <ul> and animated with jQuery:

$(function(){
        var scroller = $('#scroller div.innerScrollArea');
        var scrollerContent = scroller.children('ul');
        scrollerContent.children().clone().appendTo(scrollerContent);
        var curX = 0;
        scrollerContent.children().each(function(){
            var $this = $(this);
            $this.css('left', curX);
            curX += $this.outerWidth(true);
        });
        var fullW = curX / 2;
        var viewportW = scroller.width();

        // Scrolling speed management
        var controller = {curSpeed:0, fullSpeed:4};
        var $controller = $(controller);
        var tweenToNewSpeed = function(newSpeed, duration)
        {
            if (duration === undefined)
                duration = 600;
            $controller.stop(true).animate({curSpeed:newSpeed}, duration);
        };

        // Scrolling management; start the automatical scrolling
        var doScroll = function()
        {
            var curX = scroller.scrollLeft();
            var newX = curX + controller.curSpeed;
            if (newX > fullW*2 - viewportW)
                newX -= fullW;
            scroller.scrollLeft(newX);
        };
        setInterval(doScroll, 20);
        tweenToNewSpeed(controller.fullSpeed);
    });

});

gsap:

var tl = new TimelineMax({repeat:-1}); 
var right = $(".background").width()*20;
$(".animation-wrapper").css("left",-left+"px");
    function backgroundMoveInitiate()
    {
      tl.to(".animation-wrapper", 50, {right: -right,  ease:Linear.easeNone});
    }
backgroundMoveInitiate();

Answer 1

Try using transit.js. The syntax is identical to jQuery animate, but it converts what would be jQuery animations into pure CSS animations. I found significant speed improvements when implementing transit.js in one of my projects using a scrolling panoramic image in my site.