如何将css过渡应用于背景图像

Question

如果代码如下，如何将背景转换添加到background-size：

完整代码的jsfiddle链接：https://jsfiddle.net/3x4vhtj6/

div {
  background-size: 100% auto;
}

div:hover {
  background-size: auto 100%;
}

更新

如果当前版本的css无法实现这一点，则可以使用js或jquery来实现此效果。

Answer 1

transition属性是您正在寻找的。但是，您需要使用固定值才能使转换工作。

如果你别无选择，你仍然可以使用jQuery来计算值，然后使用jQuery .css()方法添加css属性。

对于您的用例，您可以编写如下内容：

jQuery的：

$('.my-div').css({ background-size: getBackgroundSize() });

CSS：

div.my-div {
    transition: all 1s;
}

div.my-div:hover {
    transition: all 1s;
}