鼠标悬浮给background-size添加过渡动画

可以使用CSS3的transition属性来为background-size添加过渡动画。

首先，定义一个类名，比如hover-bg：

.hover-bg {
  background-size: 100% auto;
  transition: background-size 0.5s ease-in-out;
}

然后，在需要添加过渡动画的元素上，添加hover事件和hover-bg类名：

<div class="box" onmouseover="this.classList.add('hover-bg')" onmouseout="this.classList.remove('hover-bg')">
  ...
</div>

这样，在鼠标悬浮到这个元素上时，background-size属性会从默认值（比如cover）过渡到100% auto，过渡时间为0.5秒，动画效果为缓进缓出。当鼠标移开时，过渡反向进行，效果如图所示：