Javascript 如何使用CSS/JS调整背景图像的大小

我有一个全屏网站，上面有

背景图片：无重复
和
背景大小：封面
样式。我想制作一个动画，背景图像将在10秒内调整到页面右侧的
350px
宽度和
175px
高度。甚至有可能做到这一点

body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}

我看过一些webkit动画，但是背景尺寸：封面样式有问题，所以动画不起作用

我试过：

$(function(){
$('body').one("mouseover", function() {
    $('body').addClass('hover');
});

}))

但它会立即调整图像的大小并将其向右移动，我想线性调整它们的大小

非常感谢大家！：-）
 您可以在css中添加如下内容：

body {
    background-position: center center;
    transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}

body.hover {
    background-size: 350px 170px;
    background-position: right center;
}


但是，这样做的问题是，它不会设置大小动画。
我建议您不要将图像设置为背景。相反，请使用位置和z索引属性将图像放置在所有其他元素后面。设置后，可以添加动画。有关使用z索引和位置属性的更多详细信息，请参阅下面的链接和“自己尝试”示例：-


然后可以使用css动画调整imgae的大小

要了解如何添加动画，请参见以下链接：-
我相信您正在寻找CSS转换：身体在哪里。悬停CSS？您需要提供