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

Question

演示： [http://everythinghomegrown.com/]（查看 自定义您自己的 部分，其中包含四个蝙蝠侠图像）

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

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

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

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

Answer 1

已解决。

最初我有这个：

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

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

我通过向背景大小添加第二个值解决了这个问题属性。

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%;
}

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

Why is the CSS Transition on background-size not working?

css

transitions

background-size