CSS：鼠标悬停时background-size过渡动画不生效问题求助

嗨，我之前也碰到过一模一样的问题！你这个情况的核心原因很简单：background-size的关键字值（比如你用的cover）和百分比数值之间，浏览器没法计算出平滑的过渡动画——这俩属于不同类型的属性值，浏览器找不到中间过渡状态，自然就直接跳变了。

你说把初始值改成100%就正常，就是因为100%和120%都是百分比数值，属于同一类型，浏览器能轻松算出过渡过程中的每一步状态。

给你两个实用的解决方案：

方案一：用百分比模拟cover效果，直接过渡background-size #

如果你的图片和figure的aspect-ratio匹配度较高，可以把初始的background-size: cover替换成百分比数值，模拟cover的自适应表现，这样就能正常过渡了：

figure {
  position: relative;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  transition: background-size 0.4s ease;

  &:hover {
    background-size: 120%;
  }
}

不过这个方法在图片和容器宽高比差异大的时候，可能会出现图片显示不全的问题，这时候可以试试方案二。

方案二：用伪元素承载背景，通过transform实现缩放动画（更推荐） #

这个方法不仅能完美解决过渡问题，性能还比直接过渡background-size更好，而且能保持cover的自适应效果：

figure {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  /* 把background-image移到这里，让伪元素继承 */

  &::before {
    content: '';
    position: absolute;
    inset: 0; /* 相当于top/right/bottom/left都设为0 */
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
  }

  &:hover::before {
    transform: scale(1.2); /* 缩放1.2倍，对应原来的background-size:120% */
  }
}

注意：如果你的<figure>里面还有其他内容，记得给这些内容加上position: relative，这样它们会显示在伪元素背景的上方，不会被盖住。

内容来源于stack exchange