为什么背景大小上的 CSS 过渡不起作用？答案

【问题标题】：Why is the CSS Transition on background-size not working?为什么背景大小上的 CSS 过渡不起作用？
【发布时间】：2016-09-28 20:37:04
【问题描述】：

演示： [http://everythinghomegrown.com/]（查看带有四个蝙蝠侠图像的自定义部分）

由于某种原因，背景大小没有过渡。相反，它会在没有平滑过渡的情况下从一种尺寸跳到另一种尺寸。

div {
  background-size: 100%;
  transition: all 0.2s ease;
}

div:hover, div:focus {
  background-size: 115% 115%;
}

为什么过渡不起作用？我在 Chrome、Safari 和 Firefox 中遇到过这种情况。

【问题讨论】：

请在您的问题中包含最少量的代码，以便我们重现问题。不仅仅是指向您网站的链接。

标签： css transitions background-size

【解决方案1】：

解决了。

原来我有这个：

div {
  background-size: 100%;
  transition: all 0.2s ease;
}

div:hover, div:focus {
  background-size: 115% 115%;
}

我通过向 background-size 属性添加第二个值解决了这个问题。

div {
  background-size: 100% 100%; /* added second 100% to fix the problem */
  transition: all 0.2s ease;
}

div:hover, div:focus {
  background-size: 115% 115%;
}

【讨论】：