jquery – 如何：Illustrator图形到网页动画

我已经提供了一个Illustrator图形,所有形状,(低分辨率屏幕下方),我需要在网站上使用.

我需要为图形的部分设置动画,例如飞鸟,人和车移动以及灯光开/关.

问题是,我该怎么做？我一直在研究SVG,CSS和JQuery动画.到目前为止,能够非常有效地使用CSS和JQuery.

如果有人在重新调整浏览器窗口大小(响应式布局)时能够以某种方式使动画工作,那将是很棒的,这就是我开始关注SVG的原因.我还需要动画在不同浏览器之间广泛兼容.

任何例子？你会推荐什么？

谢谢.

编辑：

我将使用JQuery和关键帧动画.我正在使用的Jquery动画功能是：

function animatethis(targetElement,speed,options,options2) {
        $(targetElement).animate(options,{
            duration: speed,complete: function ()
            {
                targetElement.animate(options2,{
                    duration: speed,complete: function ()
                    {
                        animatethis(targetElement,options2);
                    }
                });
            }
        });
    };

用法示例：

animatethis($(‘.big-cloud1’),40000,{‘left’：’= 120％’},{‘left’：’ – = 120％’}})

我还在计算重新调整浏览器大小时单个图像的大小.我的基础是全宽动画的最大比例.

这是以下代码：

// get main image
var mainImage = $('.main-bg');

// Create new offscreen image to test
var theImage = new Image();
theImage.src = mainImage.attr("src");

// Get accurate measurements from that.
var maxWidth = theImage.width;

jQuery.fn.resizeRatio = function(newHeight){
    // work out new ratio
    var currentWidth = $('.main-bg').width();
    var diff = maxWidth - currentWidth;
    var precent = diff / maxWidth;

    // get current image width
    var currentImage = new Image();
    currentImage.src = $(this).attr("src");
    var currentWidth = currentImage.width;

    // apply new width
    $(this).width(currentWidth - (currentWidth*precent))

}

var initAnimation = function(){
    $('#animation').imagesLoaded(function(){
        $('#animation img').not('.sun,.main-bg').each(function( index ) {
            $(this).resizeRatio()
        });     
    });
}
initAnimation()

$(window).resize(function(){
    initAnimation()
});

jQuery(window).resize(function(){
    // Do your magic
});

img {
    width: (certain amount in percentages)
    height: auto;
}