我得到了一个 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, speed, options, 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()
});