Javascript 滚动背景动画

我创建了一个名为content的元素和3个按钮“portfolio”、“about”、“contact”。我想背景滚动到某一部分，每一个我点击。目前，每个卷轴都有这样的动画

@-webkit-keyframes toPortfolioBg {
    from {background-position:inherit; }
    to {background-position: 0px ;}
}   
@-webkit-keyframes toAboutBg {
    from {background-position: inherit;}
    to {background-position: 1920px ;}  
}
@-webkit-keyframes toContactBg {
    from {background-position: inherit; }
    to {background-position: 3840px ;}  
}

还有当我点击每个按钮时运行每个动画的js

$(".portfolio").click(function() {
    reset()
    $("#portfolio").show(); 
    $("#content").css({"-webkit-animation": "toPortfolioBg 5s forwards" });     
    $("#content").css({"animation": "toPortfolioBg 5s forwards" });     
})
$(".about").click(function() {
    reset()
    $("#about").show();
    $("#content").css({"-webkit-animation": "toAboutBg 5s forwards" });         
    $("#content").css({"animation": "toAboutBg 5s forwards" });
})
$(".contact").click(function() {
    reset()
    $("#contact").show();
    $("#content").css({"-webkit-animation": "toContactBg 5s forwards" }); 
    $("#content").css({"animation": "toContactBg 5s forwards" }); 
})

然而，此时它会直接返回到第一个图像，然后在执行任何动画时滚动。我希望它从当前位置滚动到某个位置。可能吗

注意：这是我正在滚动的图片的链接。

---

正如你所看到的，它是一个大图像上的3个图像。每个图像都有不同的位，一个用于“公文包”，一个用于“关于”等。

使用动画。css

---

提示：backgroundPositionX:“+=200px”将px中的值设置为value=value+200

你能创建一个吗？我只想问你一个与你的问题无关的问题。为什么要使用CSS3来完成这个简单的任务？我肯定会使用简单的jQuery动画，这也得到了更广泛的支持。我将如何使用jQuery动画？你能帮我链接一些东西吗？非常感谢：D一个问题：当它设置动画时，有没有办法让它不那么紧张呢？或者这只是延迟/连接？$（选择器）.animate（{params}，speed，callback）；将速度更改为较低的值

 $("#content").animate({
    backgroundPositionX:"xpos", 
    backgroundPositionY:"ypos"
    },5000);