动画背景大小在最新版本的 Chrome 中无法正常工作

【问题标题】：Animation background size not functioning correctly in latest version of Chrome动画背景大小在最新版本的 Chrome 中无法正常工作
【发布时间】：2016-10-23 10:48:40
【问题描述】：

我偶然发现了一个有趣的错误，即在最新版本的 Chrome 中为背景大小设置动画并没有考虑到过渡。它似乎在 Safari、Firefox 和 Internet Explorer 中运行良好。

background-size: 100%
transition: background-size 0.5s

  &:hover
    background-size: 150%
    transition: background-size 0.5s

Here's a link to a codepen

【问题讨论】：

Chrome 53 DEV 没问题。

标签： css google-chrome css-transitions

【解决方案1】：

尝试添加一个新元素，然后为该元素添加背景
添加溢出：隐藏到父元素
悬停缩放子元素

喜欢

<div class="parent">
  <div class="child">
    </div>
</div>

.child { height:400px;width:200px;background:url....;transition:0.5s}
.parent { overflow:hidden;}
.parent:hover .child { transform:scale(1.5)}

或者您可以使用伪元素，例如 :before

.parent { overflow:hidden;}
.parent:before { width:100%;height:100%;content:"";position:absolute;top:0;background:url....;transition:0.5s } 
.parent:hover:before { transform:scale(1.5)}

这是jsfiddle 与第二种解决方案
第一个解决方案也有效。你选择:)

【讨论】：