使用重（超过 400kb）svg 作为动画背景（css3）

Question

我有长（超过 1500px）和重（超过 400kb）的图像，它描述了环境。我正在尝试从左到右制作动画，但动画不流畅，移动非常粗糙。我尝试了不同的方法，所有方法都在下面进行了描述。那么你知道如何解决这个粗略的移动吗？

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

尝试使用 transit.js。语法与 jQuery animate 相同，但它将 jQuery 动画转换为纯 CSS 动画。在我的一个项目中使用滚动全景图像在我的站点中实施 transit.js 时，我发现速度显着提高。

Answer 2

在 TweenLite 动画中，使用属性 x 和 y 而不是 left 和 top，并启用 force3D.

您的选项对象应如下所示： {x: xVal, force3D: true, ease:Linear.easeNone}

使用重（超过 400kb）svg 作为动画背景（css3）

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

javascript

css

jquery

svg

gsap